试图排队

Question

可能是晚上的时间，但我无法弄清楚如何排列这些article元素。当我的一篇文章中有更多文字时，它会使其余文章停止正常浮动。

我在这里设置了一个演示：http://codepen.io/realph/pen/eumyj

感谢任何帮助。提前谢谢！

Answer 1

最简单的方法（尽管支持有限），将使用CSS3 columns：

UPDATED EXAMPLE HERE

.container {
    background: brown;
    width: 940px;
    margin: 0 auto;
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
}

或者，只需创建元素inline-block而不是浮动元素，然后使用vertical-align:top进行对齐。

EXAMPLE HERE

article {
    display: inline-block;
    vertical-align: top;
    background: yellow;
    margin-right: 20px;
    margin-bottom: 40px;
    width: 200px;
}

另一种方法是使用nth-child清除第四个元素：

EXAMPLE HERE

article:nth-child(4n+1) {
   clear: both;
}