CSS-使div水平对齐

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个容器div，其中有一个固定的，width并height带有overflow: hidden。

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

！[错误] [1]- 删除了已被广告替换的图片棚屋图片

我希望它看起来如何：

！[右] [2]- 删除了已被广告替换的图片棚屋图片

注意：我想要的效果可以通过使用内联元素＆来实现white-space: no-

wrap（这就是我在所示图像中所做的事情）。但是，这对我不利（由于冗长的原因，在这里无法解释），因为子div需要浮动块级元素。

回答：

您可以在容器中放置一个内部div，其宽度足以容纳所有浮动的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>

以上是 CSS-使div水平对齐 的全部内容， 来源链接： utcz.com/qa/435904.html

回到顶部