style - html引入css




将div一个安排在另一个之下 (3)

我有两个内部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; 
} 

div的默认行为是获取其父容器中可用的完整宽度。
这就像你给内部div的宽度为100%一样。

通过浮动div,它们忽略它们的默认值并调整其宽度以适合内容。 它背后的所有内容(在HTML中)都放在div下(在呈现的页面上)。
这就是他们将自己排成一列的原因。

float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧,其中文本和内联元素将环绕它。 浮动元素是float的计算值不是none的元素。

资料来源: https://developer.mozilla.org/en-US/docs/Web/CSS/floathttps://developer.mozilla.org/en-US/docs/Web/CSS/float

摆脱浮动,div将彼此对齐。
如果没有发生这种情况,您将在div或子包装上定义浮动行为或内联显示的其他css。

如果你想保持浮动,无论出于何种原因,你可以在第二个div上使用clear来重置元素之前元素的浮动属性。
clear有5个有效值: none | left | right | both | inherit none | left | right | both | inherit none | left | right | both | inherit 。 清除没有浮动(用于覆盖继承的属性),左浮动或右浮动或两个浮动。 继承意味着它将继承父元素的行为

此外,由于默认行为,您不需要在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;

似乎默认行为是将一个渲染到另一个之下,如果它没有发生,那是因为它们从上面继承了一些样式。

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>

尝试清楚:左上#inner2。 因为它们都被设置为浮动,所以它应该导致换行。

#inner1{
float:left; 
}
#inner2{
float:left; 
clear: left;
} 




css