Почему эти divs не выровнены по горизонтали? Почему они ломаются?

Question

Этот HTML:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;"></div> 
 
</div>

Почему красные дивы не в одной горизонтальной строке, и как я могу получить их в той же строке?

Answer 1

Ok, так что дивы являются блочными элементами, а иногда я используйте divs для содержания меню. Таким образом, вы можете добавить свойство стиля с именем display: inline-block во внутренние div, и если вы хотите, чтобы эти divs были центрированы внутри div контейнера, вы можете использовать text-align: center. Он будет работать на всех типах блоков.

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>

Answer 2

Это поведение по умолчанию div s и все остальные элементы блока. Чтобы изменить его, вы должны либо установить display на inline-block, либо float на left или right. (Установка float: left; будет оправдывать элементы в левой части их контейнера, а float: right; оправдает их с правой стороны.) Я бы рекомендовал практиковать с inline-block. Это, как правило, лучшее решение, потому что оно оставляет элементы в нормальном потоке документа, а не удаляет их из взаимодействия с соседними элементами, как это делает float.

Answer 3

Вот то, что вы ищете:

<style type="text/css"> 
    div.littleDiv { 
     display: inline-block; 
     border:1px 
     solid red; 
     height:50px; 
     width:80px; 
    } 
</style> 
<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
    <div class="littleDiv"></div> 
</div> 

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

Однако вы можете захотеть использовать float: lefts вместо display: inline-block;

От MDN

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

Answer 4

Элементы Div являются элементами стиля блока, по умолчанию. для того, чтобы сделать его в горизонтальном лвли сделать атрибут дисплея встроенного блока стиля или плавать их влево или вправо:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
    <div style="display:inline-block;border:1px solid red; height:50px; width:80px;"></div> 
</div> 

ИЛИ:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;"> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
     <div style="float:left;border:1px solid red; height:50px; width:80px;"></div> 
    </div> 

Answer 5

Это один сделал трюк, другие ответы не хватало этой детали выравнивания текста: центр ;.

Спасибо, ребята!

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;"> 
 
    <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
    <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div> 
 
</div>