使用CSS动态清除浮动 [英] Clearing floats dynamically with CSS

问题描述

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

I'm trying to create a 3-column blog layout in CSS. For each new post, there will be a new div added dynamically inside of a container div.

但是，我遇到麻烦的清除浮动，因为我不能

However, I'm running into trouble with clearing floats since I can't place a clear element manually.

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

Here's what it looks like now: http://jsfiddle.net/DZASD/

这里是我想让它看起来像： http://jsfiddle.net/DZASD/1/

And here's what I want it to look like: http://jsfiddle.net/DZASD/1/

我想能够不要在第三个div之后手动放置< div style =clear：both;> 有没有办法在每第3个div之后选择性地清除浮动元素，即使有潜在的无限div要添加吗？

I want to be able to do that without manually placing the <div style="clear:both;"> after the 3rd div. Is there some way to selectively clear the floating elements after every 3rd div, even if there are potentially infinite divs to be added?

谢谢！

推荐答案

您可以使用css选择器 nth-child 为每个第三个元素应用清除 。

You can use the css selector nth-child to apply clear to each third element.

CSS

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

演示

Demo

nth-child 如何工作

注意： nth-child 是 IE8不支援的。

这篇关于使用CSS动态清除浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！