CSS - 使div水平对齐 [英] CSS - Make divs align horizontally

问题描述

我有一个具有固定宽度和高度的容器div，带有overflow：hidden。

I have a container div with a fixed width and height, with overflow: hidden.

我想要一个水平的float：left divs。浮动左边的div在他们读取它们父对象的右边界之后自然地推到下面的'线'。即使父级的高度不允许这种情况也会发生。这是这个样子：

I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the height of the parent should not allow this. This is how this looks:

！[Wrong] [1] - 删除已被广告取代的图片棚屋图片

![Wrong][1] - removed image shack image that had been replaced by an advert

我要如何看待：

！[右] [2] - removed image shack image

![Right][2] - removed image shack image that had been replaced by an advert

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

Note: the effect I want can be achieved by using inline elements & white-space: no-wrap (that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.

推荐答案

您可以在容器中放置一个内部div来容纳所有浮动的div。

You may put an inner div in the container that is enough wide to hold all the floated divs.

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

这篇关于CSS - 使div水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！