将div一个安排在另一个之下

Question

我有两个内部div,它们嵌套在一个包装div中.我希望两个内部div一个接一个地排列.但截至目前,他们正在安排在同一条线上.

#wrapper{
        margin-left:auto;
        margin-right:auto;
        height:auto; 
        width:auto;
    }
    #inner1{
        float:left; 
    }
    #inner2{
        float:left; 
    } 
 

CSS是

  <div id="wrapper">
        <div id="inner1">This is inner div 1</div>
        <div id="inner2">This is inner div 2</div>
    </div>

Answer 1

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

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

Answer 2

如果你想要将两个divs一个显示在另一个之上,最简单的答案是float: left;从css声明中删除它,因为这会导致它们折叠到它们的内容大小(或css定义的大小),并且,漂浮相互对立.

或者,您可以简单地添加clear:both;到divs,这将强制浮动的内容清除以前的浮动.

Answer 3

将主divCSS 设置为如下所示：

<style>
    .wrapper{
        display:flex;
        flex-direction: column;
    }
</style>

<div id="wrapper">
        <div id="inner1">This is inner div 1</div>
        <div id="inner2">This is inner div 2</div>
</div>

有关更多 Flexbox CSS 的信息，请参阅： https: //css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

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

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

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

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

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

如果你想保持浮动,无论出于何种原因,你可以使用clear第二个div来重置元素之前元素的浮动属性.
clear有5个有效值: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;
}