把div放在另一个下面
我有两个嵌套在一个包装div内的div。 我想要两个内部的div来安排一个在另一个之下。 但是到目前为止，他们正在安排在同一条线上。
<div id="wrapper"> <div id="inner1"></div> <div id="inner2"></div> </div> CSS是
#wrapper{ margin-left:auto; margin-right:auto; height:auto; width:auto; } #inner1{ float:left; } #inner2{ float:left; }
试试清楚：留在＃inner2。 因为他们都被设置为浮动，它应该会导致线返回。
#inner1{ float:left; } #inner2{ float:left; clear: left; }
如果你想把两个div一个显示在另一个上面，最简单的答案就是删除float: left; 从CSS声明，因为这导致他们崩溃的大小，他们的内容（或CSS定义的大小），以及相互浮出水面。
或者，您可以简单地添加clear:both; 到div ，这将迫使漂浮的内容清除以前的花车。
div的默认行为是在其父容器中获取全部可用宽度。
这和你给内部div的宽度是100％是一样的。
通过浮动div，他们忽略他们的默认和大小的宽度，以适应内容。 它后面的所有内容（在HTML中）都放在div（渲染的页面）下面。
这就是他们把自己alignment的原因。
float CSS属性指定了一个元素应该从正常的stream中取出，并沿着它的容器的左边或右边放置，文本和内联元素将围绕它。 浮动元素是float的计算值不是none的元素。
来源： https ： //developer.mozilla.org/en-US/docs/Web/CSS/float
摆脱浮动，并且divs将被排列在彼此之下。
如果这没有发生，你将有一些其他的CSS的定义浮动行为或内联显示的包装或儿童的CSS。
如果你想保持浮动，无论出于何种原因，你可以使用clear第二个div来重置该元素之前的元素的浮动属性。
clear有5个有效值： none | left | right | both | inherit none | left | right | both | inherit none | left | right | both | inherit 。 清除没有浮动（用于重写inheritance的属性），左或右浮动或两个浮动。 inheritance意味着它会inheritance父元素的行为
另外，由于默认行为，您不需要在auto上设置宽度和高度。
你只需要这是你想设置一个硬编码的高度/宽度。 例如80％/ 800px / 500em / …
<div id="wrapper"> <div id="inner1"></div> <div id="inner2"></div> </div>
CSS是
#wrapper{ margin-left:auto; margin-right:auto; height:auto; // this is not needed, as parent container, this div will size automaticly width:auto; // this is not needed, as parent container, this div will size automaticly } /* You can get rid of the inner divs in the css, unless you want to style them. If you want to style them identicly, you can use concatenation */ #inner1, #inner2 { border: 1px solid black; }
你甚至不需要float:left;
看起来默认的行为是把一个渲染到另一个下面，如果没有发生，那是因为它们从上面inheritance了一些样式。
CSS：
#wrapper{ margin-left:auto; margin-right:auto; height:auto; width:auto; } </style>
HTML：
<div id="wrapper"> <div id="inner1">inner1</div> <div id="inner2">inner2</div> </div>
