Question

我有一个宽度和高度固定的容器div，溢出：隐藏。

我想要一个水平行的float：在这个容器中留下div。左侧浮动的Div将在读取其父级的右边界后自然地推到下面的“线”上。即使父级的高度不允许这样，也会发生这种情况。这是这样的：

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

我希望它看起来如何：

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

注意：我想要的效果可以通过使用内联元素来实现。 white-space：no-wrap（就像我在图片中所做的那样）。然而，这对我来说并不好（因为这里的解释太冗长），因为子div需要浮动块级元素。

Answer 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>

Answer 2

对于所有孩子style="overflow:hidden"，父<{1}}和div的{p> style="float: left"对于{IE}及以下的旧浏览器水平对齐divs非常重要。

对于现代浏览器，您可以对所有子divs使用style="display: table-cell"，并且它会水平正确呈现。

Answer 3

这看起来很接近你想要的：

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Answer 4

您可以使用clip属性：

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

请注意position: absolute和overflow: hidden，以便clip能够正常工作。

Answer 5

Float：left，display：如果超过容器的宽度，inline-block将无法水平对齐元素。

重要的是要注意，如果元素必须水平显示，容器不应该换行： white-space: nowrap

Answer 6

如果需要，您现在可以使用css flexbox水平和垂直对齐div。通用公式就是这样

parent-div {
   display:flex;
   flex-wrap: wrap;
   justify-content: center ; /* for horizontal aligning of child divs */
   align-items : center ; /* for vertical aligning */
   }
child-div {
  width: /* yoursize for each div */ ; 
 }

Answer 7

将他们漂浮起来。至少在Chrome中，您不需要在LucaM的示例中使用包装器id="container"。

Answer 8

您可以执行以下操作：

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

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

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

CSS - 使div水平对齐

8 个答案: