用css对齐父容器中的一行html元素

Question

我有4个div，一个外部和3个内部div，我想在主div内的同一行中对齐。默认情况下，div在主div中堆叠在一起，所以我使用float使它们排成一行。

但是一旦添加了float,div就不再出现在主div中。我如何使用CSS在主div内排列3个div?

<div id="main" style="border: solid 1px black;float:left;">
<div id="left" style="border: solid 1px red;">
Left
</div>
<div id="middle" style="border: solid 1px green;">
Middle
</div>
<div id="right" style="border: solid 1px blue;">
Right
</div>
</div>

Answer 1

您只需要在父div中添加display:flex;。

<div id="main" style="border: solid 1px black;float:left;display:flex;">
<div id="left" style="border: solid 1px red;">
Left
</div>
<div id="middle" style="border: solid 1px green;">
Middle
</div>
<div id="right" style="border: solid 1px blue;">
Right
</div>
</div>

Answer 2

你可以简单地使用Flexbox或CSS Grid，简单而现代的方式来创建布局，像这样:

#main{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}

<div id="main" style="border: solid 1px black;">
<div id="left" style="border: solid 1px red;">
Left
</div>
<div id="middle" style="border: solid 1px green;">
Middle
</div>
<div id="right" style="border: solid 1px blue;">
Right
</div>
</div>

Answer 3

div标准显示为块。您需要将外部DIV更改为display: flex。display flex的标准行为是将子div放在一行中。

如果你想在垂直和水平轴上集中它们，你可以使用along display: flex, align-items: center和justify-content: center。

Float在你想要将图像定位在文本附近时使用。在这种情况下，不要使用这种类型的位置。

Answer 4

您可以在每个flex-item上使用flex和flex: basis: 100%;，以使内部div跨越整个宽度。如果你只是想让它们彼此相邻，而不是跨越行的整个宽度，你可以使用inline-flex。

#main {
display: flex;
}
#left,
#middle,
#right {
flex-basis: 100%;
}

<div id="main" style="border: solid 1px black;">
<div id="left" style="border: solid 1px red;">
Left
</div>
<div id="middle" style="border: solid 1px green;">
Middle
</div>
<div id="right" style="border: solid 1px blue;">
Right
</div>
</div>