响应式CSS /内联div

Question

我试图使用CSS来把100% width div整个页面,然后根据该div2个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,这称为断点.

演示(调整窗口大小以查看效果)