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

问题描述

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

我想要一个水平行的 float: left divs 在这个容器中.向左浮动的 Div 在读取其父级的右边界后自然会推到下面的行"上.即使父项的 height 不允许这样做，也会发生这种情况.这是它的外观:

我想要的样子:

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

注意:使用内联元素可以达到我想要的效果&white-space: no-wrap(这就是我在显示的图像中所做的).然而，这对我没有好处(原因太长，无法在这里解释)，因为子 div 需要浮动块级元素.

解决方案

您可以在容器中放置一个足够宽的内部 div，以容纳所有浮动的 div.

#container {背景颜色:红色；溢出:隐藏；宽度:200px；}#内{溢出:隐藏；宽度:2000px；}.孩子 {向左飘浮;背景颜色:蓝色；宽度:50px；高度:50px；}

<div id="内部"><div class="child"></div><div class="child"></div><div class="child"></div>

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

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:

How I would like it to look:

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

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.

解决方案

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屋！