LI 在浏览器调整大小时移动不正确

Question

我正在创建一个wordpress网站，使用并修改其中一个可用的模板。

目前，所有的帖子都是页面宽度的80%，一个接一个地往下走。但我们希望这些帖子放在盒子里。这一切都很好，但是，浏览器调整大小/缩小屏幕的响应有一个小问题。

我有三个盒子，从左到右排成一行。当我调整屏幕大小（更改宽度）时，第三个框会下降到第一个框的下方（如预期）。但是，如果第二个框比第一个框长/高/高，则第三个方框会一直下降到第二个方框的底部，但位于第一个方框的列上。

我做了一个非常非常简单的JSFiddle来展示这一点，http://jsfiddle.net/vux85/

如果jsfiddle不工作，下面是上面的代码。。

CSS：

#ul1 {
    width:100%;
    background: red;
    list-style:none;
}
.list_item {
    width:100px;
    float:left;
    margin:15px;
    background:green;
}

HTML:

<ul id="ul1">
    <li class="list_item">This is small.</li>
    <li class="list_item">This box is very very very very very very very very very big, bigger than the other two boxes because it just is. </li>
    <li class="list_item">This one is medium sized, a bit of text in here</li>
</ul>

我想要的结果是盒子3掉到盒子1下面，就像它一样，但一直到盒子1的底部（当然还有一些余量）

谢谢！

Answer 1

您可能想尝试一下。

希望这就是你想要的。