响应式 CSS / 内联 div

我正在尝试使用 CSS 来放置100% width div穿过页面，然后在该页面下方div 2 divs inline那是50%每个每个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/ http://jsfiddle.net/dd6Wb/

首先你不需要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 http://jsfiddle.net/dd6Wb/4/（调整窗口大小看效果）