使用CSS动态清除浮动

Question

我正在尝试在CSS中创建一个3列博客布局。对于每个新帖子，将在容器div中动态添加一个新的div。

但是，由于我无法手动放置一个明确的元素，因此我遇到了清除浮动的问题。

以下是现在的样子：http://jsfiddle.net/DZASD/

这就是我想要的样子：http://jsfiddle.net/DZASD/1/

我希望无法在第3个div之后手动放置<div style="clear:both;">。有没有办法在每个第3个div之后选择性地清除浮动元素，即使有可能添加无限的div？

谢谢！

Answer 1

您可以使用css选择器nth-child将clear应用于每个第三个元素。

<强> CSS

.box:nth-child(3n + 1) {
    clear: both;
}

<强> Demo

How nth-child works

注意：nth-child为not supported by IE8 and less。