我有一个容器div
有财产width: auto;
。这个容器有子元素,具有属性float: left;
。正常的行为是连续对齐所有元素,直到一个元素溢出容器div
。在这种情况下,该子元素将放在其他子元素下。我试图强迫儿童元素扩展容器div
即使它溢出。我希望所有的子元素都对齐。
我怎么能实现这个目标?
由于浮动元素不会增加父元素的宽度,您可能需要将它们设为display: inline-block
,然后您可以将white-space: nowrap
添加到父元素。如果您需要为父级使用非透明背景,display: inline-block
也很有用。
.container {
background-color: yellow;
white-space: nowrap;
font-size: 0;
margin: 5px 0;
}
.second.container {
display: inline-block;
}
.container > div {
display: inline-block;
width: 200px;
height: 50px;
background-color: firebrick;
margin: 10px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="second container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>