css - 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 之后。我尝试在 div3 或 div8 上使用clear:left或clear:left，但它没有用。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 和以下是您的用户群的一小部分。或者那些用户的体验是可以接受的。

Answer 2

我会试试这个：

<div1><div2>
<div style="clear:both"></div>
<div3><div4><div5><div6><div7>
<div style="clear:both"></div>
<div8><div9>...

或者

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

默认情况下，将每一行放在它自己的<div>上面和下面都会清除

Answer 3

您不需要额外的 div 来清除，将 clear 都放在要开始下一行的 div 上。

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="clear"></div>
<div></div>
<div></div>


.clear{clear:both;}

将 5 个 div 放在第一行，然后将其余部分放到第二行。演示：http: //jsfiddle.net/calder12/jQGdv/1/

Answer 4

我认为将每一行包装在自己的行中div会起作用：

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

Answer 5

试试这个。我认为这会奏效

<div style="clear:left">
  <div1><div2>
</div>
<div style="clear:left"> 
  <div3><div4><div5><div6><div7>
</div>
<div style="clear:left">
  <div8><div9>
</div>