Question

我遇到以下问题：我有3＆lt; div＆gt; -elements。其中2个我想在同一行显示，而另一个需要是新行。

我使用float：left表示前2＆lt; div＆gt;'s，但我无法产生第三个＆lt; div>在一条新线上。

现在我有：

 abcdefghijklmnop

虽然我真的想要：

 abcdefghijk
 lmnop

谢谢！

Answer 1

将clear: left;添加到您的上一个div。

Answer 2

Demo

只需将clear:both;或clear:left;添加到第三个div

即可

它不允许在div

的左侧或右侧允许浮动元素

more info..

Answer 3

Demo

使用clear:both。它将解决您的问题

Answer 4

您可以通过将clear: left添加到上一个分区元素来解决您的问题。

Answer 5

您应该将clear: left添加到上一个div。

看到这个小提琴：http://jsfiddle.net/D3Exr/7/

有关清除的更多信息：MDN

Answer 6

您可以使用clear:both;来修复它。

我建议您依赖Mozilla开发人员网络文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

clear CSS属性指定元素是否可以在旁边在它之前的浮动元素或必须向下移动（清除）在他们之下。

另外要了解如何使用clear：

左元素向下移动以清除左侧浮点数。
  正确元素向下移动以清除过去的右浮动。
  两者元素向下移动以清除左右浮动。

在你的例子中你使用了float：left;对于这2个div，您可以使用clear:left或clear:both来清除浮动的div。

<强>样本：

http://jsfiddle.net/D3Exr/8/

Answer 7

您可以尝试以下代码：

working Demo

<div style="float:left; background-color:green;">abcdef</div>
<div style="float:left; background-color:red;">ghijk</div>
<div style="background-color:yellow; display:block; clear:both;">lmnop<div>

<div> -lelement中的换行符（浮点数：左）</div>

7 个答案: