CSS 如何将 div 定位在另一个 div 下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11003641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position div below another div
提问by jrn
I have two div's:
我有两个 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">
I use the following css to float the label left of the input text field:
我使用以下 css 浮动输入文本字段左侧的标签：
label{
width:200px;
float:left;
}?
The second div shifts to the left instead of appearing below the first one. It should be aligned to the left as the first one.
第二个 div 向左移动，而不是出现在第一个下方。它应该作为第一个向左对齐。
Here is the example: http://jsfiddle.net/qh37Y/
这是示例：http: //jsfiddle.net/qh37Y/
Now if I insert a clear:both;div it works, but is this best practice?
现在，如果我插入一个clear:both; div 它有效，但这是最佳实践吗？
.clearer {
clear:both;
}
<div class="clearer"><label for="2">Shifted.</label><input type="text" id="2" name"2">?
See here: http://jsfiddle.net/ywUx6/
回答by Ryan Kinal
It looks as though this is actually a problem with the height of the divs.
看起来这实际上是 div 高度的问题。
Since the content is floating, it doesn't affect the height of the div. Thus, the content in the second div (NOT the div itself) wraps around the floated label from the first div.
由于内容是浮动的，所以不会影响div的高度。因此，第二个 div 中的内容（不是 div 本身）环绕第一个 div 的浮动标签。
clear: bothis acceptable, but if (for instance), you wanted to use these divs as one column of a two-column layout, it would break the layout.
clear: both是可以接受的，但是如果（例如）您想将这些 div 用作两列布局的一列，则会破坏布局。
I would suggest div { overflow: hidden; }instead. This supplies a new box-context for the divs, which disallows overlapping borders, thus making the height of floated contents contribute to the height of the div.
我建议div { overflow: hidden; }改为。这为 div 提供了一个新的框上下文，它不允许重叠边框，从而使浮动内容的高度对 div 的高度有贡献。
Edit: Fixed fiddle
编辑：固定小提琴
回答by user1452058
A clear:both div is perfectly acceptable to use.
一个明确的：两个 div 都是完全可以接受的。
回答by Oscar Del Ben
Yes, clear: bothis usually what you end up using. Note that you can also use clear: leftetc
是的，clear: both通常是您最终使用的。请注意，您也可以使用clear: leftetc
回答by Tomek Buszewski
First of all, you can't use identifiers which starts with digits - just sayin' ;)
首先，您不能使用以数字开头的标识符 - 只是说';)
If I understood your probledm, solution is to add clear: bothto your div:
如果我理解您的问题，解决方案是添加clear: both到您的 div：
div {
clear: both
}
div {
clear: both
}
Place the code under the label definition.
将代码放在标签定义下。
回答by salamander
I've noticed that the conventional solutions may not suffice if we are dealing with divs of the flexdisplay type. If you want to display a flexdiv below a block, even if the block has width: 100%or clear: bothis used, the flex still will appear to the side of it. The solution to this is to also specify the width of the flex element as 100%, as such:
我注意到如果我们处理flex显示类型的div，传统的解决方案可能不够用。如果你想flex在一个块下面显示一个div，即使这个块有width: 100%或被clear: both使用，flex 仍然会出现在它的侧面。对此的解决方案是还将 flex 元素的宽度指定为 100%，如下所示：
CSS:
CSS：
.top_div {
display: block;
}
.bottom_div {
display: flex;
justify-content: center;
width: 100%; /*key*/
}
HTML:
HTML：
<div class="replies_container">Your block content</div>
<div class="flex_container">
Your flex content</div>
Side note: Perhaps this is not a direct solution to the OP's question but may be useful for future Googlers who may stumble across it (such as myself) .
旁注：也许这不是 OP 问题的直接解决方案，但可能对未来可能偶然发现它的 Google 员工（例如我自己）有用。
