html – CSS – 使div水平对齐

我有一个具有固定宽度和高度的容器div,带溢出:隐藏。

我想要一个水平的float:left divs在这个容器内。浮动左边的div在他们读取它们父对象的右边界之后自然地推到下面的’线’。这将发生,即使父的高度不应该允许这样。这是这个样子:

![Wrong] [1] – 删除了已被广告取代的图片棚屋图片

我想看看:

![右] [2] – 删除已被广告取代的图像棚屋图像

注意:我想要的效果可以通过使用内联元素& white-space: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>
http://stackoverflow.com/questions/37103/css-make-divs-align-horizontally

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – CSS – 使div水平对齐