響應式CSS /內聯div

Question

我試圖使用CSS在頁面上放置一個100% width div然后在div 2 div inline ，每個10px padding在所有div上50% ，然后隨着頁面變小使得兩個50% div變為100%

這是我到目前為止：

<style type="text/css">
body,html {
    margin:0;
    padding:0;
}
.outer {
    width:100%;
}
.topblock {
    width:100%;
    padding:10px;
    border:1px solid black;
}
.block1 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
.block2 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
</style>

HTML：

<div class="outer">

<div class="topblock">
tickets
</div>

<div class="block1">
service orders
</div>

<div class="block2">
tickets 2
</div>

</div>

什么是最好的方法呢？

這里也是一個小提琴： http ： //jsfiddle.net/dd6Wb/

Answer 1

首先，你不需要display: inline; 當你使用float: left; 。 其次，當您要進行自適應設計時，請務必使用下面的代碼段

* {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

上面的代碼片段會做什么？ 好吧，如果你知道盒子模型，它只會表現相反。 此外，您不必清除浮動元素，因此您可以使用下面的代碼片段來保存浮動元素的父元素

.clear:after {
   content: "";
   display: table;
   clear: both;
}

另外，最后但並非最不重要的是，您需要使用@media查詢並在@media的已定義分辨率塊中將div寬度更改為100% ，這稱為斷點。

演示 （調整窗口大小以查看效果）

Answer 2

您可以使用媒體查詢：

@media screen and (max-width: 768px) {
   .block1, .block2 {
        width: 100%;
    }
}

演示

買前先試試

作為注釋：邊框可能會使元素變大。 由於像Safari這樣的一些瀏覽器的舍入問題，設計可能會破壞一些窗口大小。 請參閱Alien先生的答案 ，找到解決方案。

Answer 3

你的問題是邊界也是從100％發生的。

making 48% width with 1% padding and 1 px border makes 50% + 1px.

這是一個可能的解決方案： http ： //jsfiddle.net/dd6Wb/2/