Html 将 div 排列在另一个下方

arranging div one below the other

提问by user544079

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 一个在另一个下面。但截至目前，他们被安排在同一条线上。

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

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

回答by Kyle Rogers

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;
}

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

回答by David says reinstate Monica

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.

如果您希望两个divs 显示在另一个之上，最简单的答案是float: left;从 css 声明中删除，因为这会导致它们折叠到其内容的大小（或 css 定义的大小），并且浮动互相对抗。

Alternatively, you could simply add clear:both;to the divs, which will force the floated content to clear previous floats.

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

回答by BlueCacti

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 clearon the 2nd div to reset the floating properties of elements before that element.
clearhas 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

如果您想保留浮动，无论出于何种原因，您都可以clear在第二个 div 上使用该元素之前的元素重置浮动属性。
clear有 5 个有效值：none | left | right | both | inherit. 清除无浮点数（用于覆盖继承的属性）、左侧或右侧浮点数或两个浮点数。继承意味着它将继承父元素的行为

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;
}

回答by user3267938

You don't even need the float:left;

你甚至不需要 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>