小编典典

CSS-使div水平对齐

html

我有一个容器div,其中有一个固定的,widthheight带有overflow: hidden

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

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

我希望它看起来如何:

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

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


阅读 2275

收藏
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