Question

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

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

刚刚离开的浮动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>...

OR

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

默认情况下，将自己的<div>中的每一行放在上方和下方

Answer 3

你不需要额外的div来清除，清除你想要开始下一行的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>

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

5 个答案: