我有一个宽度和高度固定的容器div,溢出:隐藏。
我想要一个水平行的float:在这个容器中留下div。左侧浮动的Div将在读取其父级的右边界后自然地推到下面的“线”上。即使父级的高度不允许这样,也会发生这种情况。这是这样的:
![错误] [1] - 删除了已被广告替换的图像小屋图片
我希望它看起来如何:
![右] [2] - 删除了已被广告替换的图像小屋图片
注意:我想要的效果可以通过使用内联元素来实现。 white-space:no-wrap(就像我在图片中所做的那样)。然而,这对我来说并不好(因为这里的解释太冗长),因为子div需要浮动块级元素。
答案 0 :(得分:93)
您可以在容器中放置一个足够宽的内部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>
答案 1 :(得分:28)
style="overflow:hidden"
,父<{1}}和div
的{p> style="float: left"
对于{IE}及以下的旧浏览器水平对齐divs
非常重要。
对于现代浏览器,您可以对所有子divs
使用style="display: table-cell"
,并且它会水平正确呈现。
答案 2 :(得分:5)
这看起来很接近你想要的:
#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>
答案 3 :(得分:5)
您可以使用clip
属性:
#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}
请注意position: absolute
和overflow: hidden
,以便clip
能够正常工作。
答案 4 :(得分:4)
Float:left,display:如果超过容器的宽度,inline-block将无法水平对齐元素。
重要的是要注意,如果元素必须水平显示,容器不应该换行:
white-space: nowrap
答案 5 :(得分:3)
如果需要,您现在可以使用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 */ ;
}
答案 6 :(得分:1)
将他们漂浮起来。至少在Chrome中,您不需要在LucaM的示例中使用包装器id="container"
。
答案 7 :(得分:0)
您可以执行以下操作:
#container {
background-color: red;
width: 200px;
}
.child {
background-color: blue;
width: 150px;
height: 50px;
}
<div id="container">
<div id="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>