html - 使用 CSS 动态清除浮动

Question

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

但是，我在清除浮动时遇到了麻烦，因为我无法手动放置清除元素。

这是它现在的样子：http: //jsfiddle.net/DZASD/

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

我希望能够做到这一点，而无需手动放置<div style="clear:both;">第三个 div 之后。是否有某种方法可以在每 3 个 div 之后选择性地清除浮动元素，即使可能要添加无限的 div？

谢谢！

score 3 · Accepted Answer

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

CSS

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

注意： IE8 及以下nth-child不支持。

1 回答 1