I have two inner divs which are nested inside a wrapper div. I want the two inner div's to get arranged one below the other. But as of now they are getting arranged on the same line.
我有两个内部div，它们嵌套在一个包装div中。我希望两个内部div一个接一个地排列。但截至目前，他们正在安排在同一条线上。
<div id="wrapper">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
CSS is
CSS是
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
#inner1{
float:left;
}
#inner2{
float:left;
}
4 个解决方案
#1
89
Try a clear: left on #inner2. Because they are both being set to float it should cause a line return.
尝试清楚：左边＃inner2。因为它们都被设置为浮动，它应该导致换行。
#inner1{
float:left;
}
#inner2{
float:left;
clear: left;
}
#2
14
If you want the two divs to be displayed one above the other, the simplest answer is to remove the float: left;from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
如果你想要将两个div一个显示在另一个之上，最简单的答案是从css声明中删除float：left;因为这会导致它们折叠到其内容的大小（或css定义的大小），而且，相互浮动。
Alternatively, you could simply add clear:both; to the divs, which will force the floated content to clear previous floats.
或者，您可以简单地添加clear：both;到divs，这将迫使浮动的内容清除以前的浮动。
#3
5
The default behaviour of divs is to take the full width available in their parent container.
This is the same as if you'd give the inner divs a width of 100%.
div的默认行为是获取其父容器中可用的完整宽度。这就像你给内部div的宽度为100％一样。
By floating the divs, they ignore their default and size their width to fit the content. Everything behind it (in the HTML), is placed under the div (on the rendered page).
This is the reason that they align theirselves next to each other.
通过浮动div，它们忽略它们的默认值并调整其宽度以适合内容。它背后的所有内容（在HTML中）都放在div下（在呈现的页面上）。这就是他们彼此相邻的原因。
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。浮动元素是float的计算值不是none的元素。
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/float
资料来源：https：//developer.mozilla.org/en-US/docs/Web/CSS/float
Get rid of the float, and the divs will be aligned under each other.
If this does not happen, you'll have some other css on divs or children of wrapper defining a floating behaviour or an inline display.
摆脱浮动，div将彼此对齐。如果没有发生这种情况，您将在div或子包装上定义浮动行为或内联显示的其他css。
If you want to keep the float, for whatever reason, you can use clear on the 2nd div to reset the floating properties of elements before that element.clear has 5 valid values: none | left | right | both | inherit. Clearing no floats (used to override inherited properties), left or right floats or both floats. Inherit means it'll inherit the behaviour of the parent element
如果你想保持浮动，无论出于何种原因，你可以在第二个div上使用clear来重置元素之前元素的浮动属性。 clear有5个有效值：none |离开|对|两个|继承。清除没有浮动（用于覆盖继承的属性），左浮动或右浮动或两个浮动。继承意味着它将继承父元素的行为
Also, because of the default behaviour, you don't need to set the width and height on auto.
You only need this is you want to set a hardcoded height/width. E.g. 80% / 800px / 500em / ...
此外，由于默认行为，您无需在auto上设置宽度和高度。您只需要这个就是要设置硬编码的高度/宽度。例如。 80％/ 800px / 500em / ...
<div id="wrapper">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
CSS is
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;
}
#4
1
You don't even need the float:left;
你甚至不需要漂浮物：左;
It seems the default behavior is to render one below the other, if it doesn't happen it's because they are inheriting some style from above.
似乎默认行为是将一个渲染到另一个之下，如果它没有发生，那是因为它们从上面继承了一些样式。
CSS:
CSS：
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
</style>
HTML:
HTML：
<div id="wrapper">
<div id="inner1">inner1</div>
<div id="inner2">inner2</div>
</div>
#1
89
Try a clear: left on #inner2. Because they are both being set to float it should cause a line return.
尝试清楚：左边＃inner2。因为它们都被设置为浮动，它应该导致换行。
#inner1{
float:left;
}
#inner2{
float:left;
clear: left;
}
#2
14
If you want the two divs to be displayed one above the other, the simplest answer is to remove the float: left;from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
如果你想要将两个div一个显示在另一个之上，最简单的答案是从css声明中删除float：left;因为这会导致它们折叠到其内容的大小（或css定义的大小），而且，相互浮动。
Alternatively, you could simply add clear:both; to the divs, which will force the floated content to clear previous floats.
或者，您可以简单地添加clear：both;到divs，这将迫使浮动的内容清除以前的浮动。
#3
5
The default behaviour of divs is to take the full width available in their parent container.
This is the same as if you'd give the inner divs a width of 100%.
div的默认行为是获取其父容器中可用的完整宽度。这就像你给内部div的宽度为100％一样。
By floating the divs, they ignore their default and size their width to fit the content. Everything behind it (in the HTML), is placed under the div (on the rendered page).
This is the reason that they align theirselves next to each other.
通过浮动div，它们忽略它们的默认值并调整其宽度以适合内容。它背后的所有内容（在HTML中）都放在div下（在呈现的页面上）。这就是他们彼此相邻的原因。
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。浮动元素是float的计算值不是none的元素。
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/float
资料来源：https：//developer.mozilla.org/en-US/docs/Web/CSS/float
Get rid of the float, and the divs will be aligned under each other.
If this does not happen, you'll have some other css on divs or children of wrapper defining a floating behaviour or an inline display.
摆脱浮动，div将彼此对齐。如果没有发生这种情况，您将在div或子包装上定义浮动行为或内联显示的其他css。
If you want to keep the float, for whatever reason, you can use clear on the 2nd div to reset the floating properties of elements before that element.clear has 5 valid values: none | left | right | both | inherit. Clearing no floats (used to override inherited properties), left or right floats or both floats. Inherit means it'll inherit the behaviour of the parent element
如果你想保持浮动，无论出于何种原因，你可以在第二个div上使用clear来重置元素之前元素的浮动属性。 clear有5个有效值：none |离开|对|两个|继承。清除没有浮动（用于覆盖继承的属性），左浮动或右浮动或两个浮动。继承意味着它将继承父元素的行为
Also, because of the default behaviour, you don't need to set the width and height on auto.
You only need this is you want to set a hardcoded height/width. E.g. 80% / 800px / 500em / ...
此外，由于默认行为，您无需在auto上设置宽度和高度。您只需要这个就是要设置硬编码的高度/宽度。例如。 80％/ 800px / 500em / ...
<div id="wrapper">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
CSS is
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;
}
#4
1
You don't even need the float:left;
你甚至不需要漂浮物：左;
It seems the default behavior is to render one below the other, if it doesn't happen it's because they are inheriting some style from above.
似乎默认行为是将一个渲染到另一个之下，如果它没有发生，那是因为它们从上面继承了一些样式。
CSS:
CSS：
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
</style>
HTML:
HTML：
<div id="wrapper">
<div id="inner1">inner1</div>
<div id="inner2">inner2</div>
</div>