Размещение div один под другим

Ответ 1

Попробуйте очистить: осталось на # 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>

Ответ 2

Если вы хотите, чтобы два div отображались один над другим, самым простым ответом является удаление float: left; из объявления css, поскольку это приводит к их сглаживанию до размера их содержимого (или css определенный размер), и, будьте осторожны друг с другом.

В качестве альтернативы вы можете просто добавить clear:both; в div s, что заставит плавающий контент очистить предыдущие поплавки.

Ответ 3

Поведение div по умолчанию - использовать всю ширину, доступную в родительском контейнере.
Это то же самое, что если бы вы дали внутренним элементам ширину 100%.

Перемещая элементы div, они игнорируют их значения по умолчанию и изменяют размер по ширине, чтобы соответствовать содержимому. Все, что за ним (в HTML), помещается под div (на отображаемой странице).
Это причина того, что они выстраиваются рядом друг с другом.

CSS-свойство float указывает, что элемент должен быть взят из нормального потока и размещен вдоль левой или правой стороны его контейнера, где текстовые и встроенные элементы будут обтекать его. Плавающий элемент - это тот, в котором вычисленное значение float не равно none.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Избавьтесь от поплавка, и дивы будут выровнены друг под другом.
Если этого не произойдет, у вас будет несколько других CSS для div или дочерних элементов оболочки, определяющих плавающее поведение или встроенное отображение.

Если по какой-либо причине вы хотите сохранить значение с плавающей точкой, вы можете использовать clear во втором div для сброса плавающих свойств элементов перед этим элементом.
clear имеет 5 допустимых значений: none | left | right | both | inherit none | left | right | both | inherit none | left | right | both | inherit Очистка без float (используется для переопределения унаследованных свойств), левый или правый float или оба float. Наследовать означает, что он унаследует поведение родительского элемента

Кроме того, из-за поведения по умолчанию вам не нужно устанавливать ширину и высоту на авто.
Вам нужно только это, если вы хотите установить жестко заданную высоту/ширину. Например, 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;
}

Ответ 4

Вам даже не нужен 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>