如何将一个div放置在另一个div下方

Question

我有两个 div：

<div><label for="1">Some really loooong text... Which breaks the second div. Which then appears shifted to the right.</label><input type="text" id="1" name"1"></div>
<div><label for="2">Shifted.</label><input type="text" id="2" name"2">

我使用以下CSS代码，将标签浮动到输入文本字段的左侧：

label{
    width:200px;
    float:left;
}​

第二个div向左移，而不是出现在第一个div下面。它应该像第一个div一样对齐到左边。

这里是示例：http://jsfiddle.net/qh37Y/ 现在如果我插入一个clear:both; 的div，它可以正常工作，但这是否是最佳实践？

.clearer {
    clear:both;
}
<div class="clearer"><label for="2">Shifted.</label><input type="text" id="2" name"2">​

看这里：http://jsfiddle.net/ywUx6/

- jrn

Answer 1

看起来实际上是

标签高度的问题。

由于内容被浮动，它不会影响

标签的高度。 因此，第二个

中的内容（而不是

本身）会围绕第一个

中浮动标签进行换行。

clear: both是可以接受的，但如果（例如），您想要将这些

作为两列布局的一列，则会破坏该布局。

我建议改用div { overflow: hidden; }。 这为

提供了新的盒子上下文，禁止重叠边框，从而使浮动内容的高度为

标签的高度做出贡献。

编辑：已修正的小抄

- Ryan Kinal

---

我不得不添加 width: 100% 才能使它在我的情况下正常工作（在 FF 和 Chrome 中）。 - koppor

Answer 2

使用clear:both div是完全可接受的。

- user1452058

Answer 3

是的，通常情况下您需要使用 clear: both。注意，您还可以使用 clear: left 等。

- Oscar Del Ben

Answer 4

首先，你不能使用以数字开头的标识符 - 只是说一下 ;)

如果我理解你的问题，解决方案是在你的div中添加clear:both：

div { clear: both }

将代码放置在标签定义下方。

- Tomek Buszewski

---

感谢您提供ID的提示 :) - jrn

Answer 5

我注意到传统的解决方案可能无法满足处理 flex 显示类型的 div 的需求。如果你想要在一个块下面显示一个 flex div，即使这个块有 width: 100% 或使用了 clear: both，flex 仍然会出现在它的旁边。解决这个问题的方法是同时指定 flex 元素的宽度为 100%，如下所示：

CSS:

.top_div {
    display: block; 

}

.bottom_div {
    display:    flex;
    justify-content: center;    
    width:  100%; /*key*/
}

HTML:

<div class="replies_container">Your block content</div>
<div class="flex_container">
Your flex content</div>

顺带一提：也许这不是对楼主问题的直接解决方案，但对于未来可能会碰到此类问题的谷歌搜索者（比如我自己）可能会有用。

- salamander