【发布时间】：2014-12-09 23:40:37
【问题描述】：
我有以下html代码：
<div class="messages">
<div class="message">1</div>
<div class="message">2</div>
<div class="message">3</div>
<div class="message">4</div>
<div class="message">5</div>
<div class="message">6</div>
<div class="message">7</div>
<div class="message">8</div>
</div>
我想做的是使用奇数/偶数 nth-child 选择器对它们进行一些备用浮点数。但是我想要一些更复杂的东西。我不希望每个消息节点都执行“清除”，而是希望它们能够贴近它们顶部的节点。这只能通过 CSS 实现吗？
编辑： 无需为盒子随机分配高度。每个盒子里面都有正文（人们的 cmets），这将使每个盒子的高度可变。如果我没有在这里说明，我很抱歉。
【问题讨论】：
-
我相信你需要各种 Javascript 来制作随机交替的高度，但让我看看我能做什么。
-
你需要 JS 来做这件事——比如 Masonry 或 Isotope。顺便说一句，不要在每个元素上使用相同的类。您可以使用
.messages > div定位所有messagediv。 -
我认为仅使用 CSS 是不可能的。但是有很好的 jQuery 插件，比如 jQuery wookmark 和 jQuery Masonry，它们可以很好地做到这一点。当然，如果这是您的选择。
-
@SteveSanders 该布局在将任何内容放入其他列之前填充第一列。这不是 OP 想要的。注意他示例中的 LTR 方向。
-
我认为像 Masonry 这样的东西正在我所追求的道路上。谢谢你的建议。
标签： css multiple-columns