Question

我正在尝试使用CSS在页面中放置100% width div，然后在div 2 div个inline下每个50%所有10px padding上的div，然后随着网页变小，两个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个查询，并在div的已定义解决方案块中将100%宽度更改为@media，这是被称为断点。

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

Answer 2

您可以使用媒体查询：

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

<强>演示

Try before buy

作为注释：边框可能会使元素变大。由于像Safari这样的一些浏览器的舍入问题，设计可能会破坏一些窗口大小。有关此问题的解决方案，请参阅Mr. Alien's answer。

Answer 3

你的问题是边界也是从100％发生的。

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

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

响应式CSS /内联div

3 个答案: