CSS 宽度自动和向左浮动 - 允许溢出

【问题标题】：CSS Width auto and float left - Allow to overflowCSS 宽度自动和向左浮动 - 允许溢出
【发布时间】：2018-08-08 23:14:41
【问题描述】：

我有一个容器 div，它的属性为 width: auto;。此容器具有具有属性float: left; 的子元素。正常行为是连续对齐所有元素，直到一个元素溢出容器div。在这种情况下，该子元素将被放置在其他子元素之下。我试图强制子元素扩展容器div，即使它溢出。我希望所有子元素都对齐。

我怎样才能做到这一点？

【问题讨论】：

能否添加HTML标记的示例（最好使用编辑器菜单栏中的sn-p工具... ctrl-M）

标签： html css alignment css-float layer

【解决方案1】：

由于浮动元素不会增加父元素的宽度，您可能需要将它们设为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>

【讨论】：