html - CSS - 使 div 水平对齐

Question

我有一个容器 div，具有固定的 width 和 height，overflow: hidden。

我想要一个水平行的 float: left divs 在此容器中。向左浮动的 div 在读取其父级的右边界后自然会推到下面的“行”。即使父级的 height 不允许这样做，也会发生这种情况。这就是它的样子:

我希望它看起来如何:

![右][2] - 删除了已被广告替换的图像小屋图像

注意:我想要的效果可以通过使用内联元素 & white-space: no-wrap 来实现(这就是我在显示的图像中所做的)。然而，这对我来说并不好(由于太长的原因无法在这里解释)，因为子 div 需要 float block 级元素。

Answer 1

您可以在容器中放置一个足够宽的内部 div，以容纳所有 float 的 div。

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>