CSS浮动.是否有可能打破流量？

Question

在我的html页面上我有这种情况:

<div1><div2><div3><div4><div5><div6><div7><div8><div9> ...

刚离开的浮动div一个接一个地显示出来.所有这些都有CSS样式float:left

我想实现这个结果:

<div1><div2>
<div3><div4><div5><div6><div7>
<div8><div9>...

基本上,我想通过告诉它从新行开始,打破div3和div8(或我希望的任何div)的流程.所有其他元素应该在进入新行的div之后.我尝试使用clear:left或clear:left div3或div8,但它不起作用.Div将进入新线,但所有其他线路将保持原状,产生不希望的结果:

<div1><div2><div4><div5><div6><div7><div9>
<div3>
<div8>...

这里有什么好的简单解决方案吗？谢谢.

Answer 1

对于上帝的爱...不要divs在你的标记中引入任何额外的内容.clear:left如果你的设计是正确的,那就有效.(你知道HTML有一系列可供选择的块级元素)使用它们可能会使你的定位更容易......

CSS

div {
    float:left;
    margin-right:2ex;
    width:3em;
}

#div3, #div8 {
    clear:left;
}

HTML

<div>1</div><div>2</div>
<div id="div3">3</div><div>4</div><div>5</div><div>6</div><div>7</div>
<div id="div8">8</div><div>9</div>

小提琴:http://jsfiddle.net/d68pr/

编辑 这是一个不需要任何ID,类或额外的div-itus

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

div:nth-child(3), div:nth-child(8) {
    clear:left;
}

http://jsfiddle.net/TMxSE/

**警告**nth-child可能在某些浏览器中不可用.检查您的流量统计信息,确保IE8及以下只是您用户群的一小部分.或者那些用户的体验是可以接受的.