86

我有一个带有固定widthand的容器 div height，带有overflow: hidden.

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

错误的

我希望它看起来如何：

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

注意：我想要的效果可以通过使用内联元素 & 来实现white-space: no-wrap（我在显示的图像中就是这样做的）。然而，这对我没有好处（因为这里解释的原因太长了），因为子 div 需要浮动块级元素。

4

8 回答 8

102

您可以在容器中放置一个足够宽以容纳所有浮动 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>

于 2008-08-31T21:29:59.510 回答
33

style="overflow:hidden"对于父母div和style="float: left"所有孩子来说，对于 IE7 及更低版本的旧浏览器水平对齐divs非常重要。divs

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

于 2011-04-13T11:17:50.910 回答
7

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

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

child-div {
  width: /* yoursize for each div */
  ;
}
于 2016-07-17T10:58:04.950 回答
6

这似乎接近你想要的：

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

于 2008-08-31T21:24:05.907 回答
5

您可以使用该clip属性：

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

注意position: absolute和overflow: hidden需要才能开始clip工作。

于 2008-08-31T21:28:31.213 回答
4

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

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

于 2015-08-28T17:57:15.150 回答
1

让他们离开。id="container"在 Chrome 中，至少在 LucaM 的示例中，您不需要包装器。

于 2012-07-30T07:57:55.527 回答
0

你可以这样做：

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

于 2020-04-19T06:57:58.590 回答