【发布时间】：2014-06-01 10:18:11
【问题描述】：
我正在创建一个 wordpress 网站，使用和修改其中一个可用模板。
目前所有的帖子都是页面宽度的80%，一个接一个地往下走。但我们希望帖子放在盒子里。这一切都很好，但是，浏览器调整大小/小屏幕的响应存在一个小问题。
我有 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 的底部（当然还有一些边距）
谢谢！
【问题讨论】：
-
您可以查看类似masonry 的内容。他们也没有错误地移动，这就是它的工作原理。
-
是的，对不起，我所说的“不正确”是指我想要的不正确，可以用不同的措辞来表达。砌体完全按照我的意愿完成，谢谢！很高兴看到如何在 css+html 中执行此操作，并且对于其他需要在没有 js 的情况下执行此操作的人来说，但这对我有好处！
-
据我所知，没有一个好的方法可以实现这一点，如果我确定有人会留下答案，所以让问题保持开放，看看是否有人有办法做到这一点在
HTML和CSS。
标签： html css wordpress responsive-design