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

Question

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

目前所有帖子都是页面宽度的80％，一个接一个地沿着页面移动。但我们希望这些帖子在盒子里。这一切都运行正常，但是，浏览器调整大小/较小屏幕上的响应存在轻微问题。

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

我做了一个非常非常简化的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

您可能想尝试this。

希望这就是你要找的东西。