CSS属性'float'的问题

Question

我正在尝试回应定位四个div元素。我的方法是使用CSS float:left语句（jsFiddle code example）。

CSS

.smart-box {
    width: 28%;
    min-width: 330px;
    margin-right: 4%;
    vertical-align: top;
    float: left;
}

HTML

<div class="smart-box">
    <h3>Category 1</h3>
    <ul>    
        <li>...</li>
    </ul>
</div>

<div class="smart-box">
    <h3>Category 2</h3>
    <ul>    
        <li>...</li>
    </ul>
</div>

...

这是一个具有所需行为的示例。

---

问题

但是当窗口（水平）太小时，这些框会以不受欢迎的方式运行（见截图）。

我需要修改哪些内容#4置于#1下方或下面草拟的订单中？

+-----+    +-----+
|  1  |    |  3  |
+-----+    +-----+

+-----+    +-----+
|  2  |    |  4  |
+-----+    +-----+

Answer 1

获得您在第一张图片中显示的结果的好方法是删除float: left，而是使用inline-block：

.smart-box {
    display: inline-block; 
    vertical-align:top;
}

Answer 2

一种方法是在屏幕宽度低于特定大小时使用媒体查询添加新样式。

@media screen and (max-width:820px) {
    .smart-box3{
        clear:both;
    }
}
}

（我必须给第三个盒子一类smart-box3）

请参阅：http://jsfiddle.net/LP9bz/

NB这样包装因为第一个盒子高于第二个盒子。您还可以使用javascript设置所有框的高度以匹配最高的框。