CSS-使div水平对齐

一尘不染

CSS-使div水平对齐

html

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

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

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

我希望它看起来如何：

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

注意：我想要的效果可以通过使用内联元素＆来实现white-space: no- wrap（这就是我在所示图像中所做的事情）。但是，这对我不利（由于冗长的原因，在这里无法解释），因为子div需要浮动块级元素。

阅读 2215

2020-05-10

共1个答案

一尘不染

您可以在容器中放置一个内部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>

2020-05-10