CSS - 使 div 水平对齐

StackOverflow https://stackoverflow.com/questions/37103

  •  09-06-2019
  •  | 
  •  

题

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

我想要一排水平浮动：在此容器内留下 div。向左浮动的 Div 在读取其父级的右边界后，会自然地推到下面的“行”上。即使父母的身高不允许这种情况发生，这种情况也会发生。看起来是这样的：

![错误][1] - 删除了已被广告取代的图像小屋图像

我希望它看起来如何：

![右][2] - 删除了已被广告取代的图像小屋图像

笔记：我想要的效果可以通过使用内联元素和空白来实现：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>

其他提示

style="overflow:hidden" 给家长 div 和 style="float: left" 为了所有的孩子 divs 对于使 divs 对于 IE7 及更低版本的旧浏览器水平对齐。

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

你可以使用 clip 财产：

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

请注意 position: absolute 和 overflow: hidden 需要为了得到 clip 上班。

这似乎很接近你想要的：

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

漂浮：左，显示：如果元素超出容器的宽度，则 inline-block 都将无法水平对齐元素。

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

如果需要，您现在可以使用 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 */ ; 
 }

让他们离开。至少在 Chrome 中，你不需要有一个包装器， id="container", ，在 LucaM 的例子中。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top