css - 尝试排列 Div

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 而不是 float 元素，然后使用 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;
}