我有一个带有固定width和height以及overflow: hidden的容器div。
我想要水平行的float：在此容器内的左div。 在向左浮动的Divs读取其父级的右边界后，自然会推到下面的"行"上。 即使父级的height不允许这样做，也会发生这种情况。 这是这样的样子：
！[错误] [1]-删除了已由广告替换的图片棚屋图片
我希望它看起来如何：
！[右] [2]-删除了已被广告替换的图片棚屋图片
注意：我想要的效果可以通过使用内联元素＆white-space: no-wrap来实现(这就是我在所示图像中所做的事情)。 但是，这对我不利(由于冗长的原因，在这里无法解释)，因为子div需要浮动块级元素。
您可以在容器中放置一个内部div，其宽度足以容纳所有浮动的div。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| #container {
background-color: red;
overflow: hidden;
width: 200px;
}
#inner {
overflow: hidden;
width: 2000px;
}
.child {
float: left;
background-color: blue;
width: 50px;
height: 50px;
} |
对于父级div的style="overflow:hidden"和所有子级divs的style="float: left"对于使divs在IE7及以下版本的旧浏览器中水平对齐很重要。
对于现代浏览器，您可以对所有子级divs使用style="display: table-cell"，它将正确地水平呈现。
这似乎接近您想要的：
1
2
3
4
5
6
7
8
9
10
11
12
13
| #foo {
background: red;
max-height: 100px;
overflow-y: hidden;
}
.bar {
background: blue;
width: 100px;
height: 100px;
float: left;
margin: 1em;
} |
您可以使用clip属性：
1
2
3
4
5
6
| #container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
} |
请注意为了使clip工作所需的position: absolute和overflow: hidden。
浮动：向左显示：如果行内块超过容器的宽度，它们都将无法水平对齐。
重要的是要注意，如果元素必须水平显示，则容器不应包装：
white-space: nowrap
现在，您可以根据需要使用CSS Flexbox在水平和垂直方向上对齐div。通用公式像这样
1
2
3
4
5
6
7
8
9
| 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中，在LucaM的示例中，您不需要包装id="container"。
您可以执行以下操作：
1
2
3
4
5
6
7
8
9
10
| #container {
background-color: red;
width: 200px;
}
.child {
background-color: blue;
width: 150px;
height: 50px;
} |
