Блог

У меня есть два внутренних 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>  

Попробуйте очистить: слева на #inner2. Поскольку для них обоих установлено значение float, это должно привести к возврату строки.

 #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>  

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

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

Установите для основного div CSS что-нибудь вроде:

 <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 /

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

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

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

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

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

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

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