题
我有一个具有固定宽度和高度的容器 div,并且有溢出:隐。
我想要一排水平浮动:在此容器内留下 div。向左浮动的 Div 在读取其父级的右边界后,会自然地推到下面的“行”上。即使父母的身高不允许这种情况发生,这种情况也会发生。看起来是这样的:
![错误][1] - 删除了已被广告取代的图像小屋图像
我希望它看起来如何:
![右][2] - 删除了已被广告取代的图像小屋图像
笔记:我想要的效果可以通过使用内联元素和空白来实现: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>
其他提示
style="overflow:hidden"
给家长 div
和 style="float: left"
为了所有的孩子 divs
对于使 divs
对于 IE7 及更低版本的旧浏览器水平对齐。
对于现代浏览器,您可以使用 style="display: table-cell"
为了所有的孩子 divs
并且它会正确地水平渲染。
你可以使用 clip
财产:
#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}
请注意 position: absolute
和 overflow: hidden
需要为了得到 clip
上班。
这似乎很接近你想要的:
#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>
漂浮:左,显示:如果元素超出容器的宽度,则 inline-block 都将无法水平对齐元素。
需要注意的是,如果元素必须水平显示,则容器不应换行: white-space: nowrap
如果需要,您现在可以使用 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 */ ;
}
让他们离开。至少在 Chrome 中,你不需要有一个包装器, id="container"
, ,在 LucaM 的例子中。