3

我正在尝试使用 CSS 将 a 放在100% width div整个页面上，然后在div2 divs下inline，50%每个s 都10px padding在所有divs 上，然后随着页面变小，将两个50% divs 更改为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/

4

3 回答 3

8

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更改为 定义的分辨率块，这称为断点。div100%@media

Demo（调整窗口大小看效果）

于 2013-08-14T10:28:45.290 回答
0

您的问题是边界也是从 100% 开始的。

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

这是一种可能的解决方案：http: //jsfiddle.net/dd6Wb/2/

于 2013-08-14T10:30:15.660 回答
0

您可以为此使用媒体查询：

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

演示

先试后买

注意：边框可能会使元素变大。由于某些浏览器（如 Safari）的舍入问题，设计可能会在某些窗口大小上中断。有关此问题的解决方案，请参见Alien 先生的回答。

于 2013-08-14T10:29:10.177 回答