我有一个容器 div,具有固定的 width
和 height
,overflow: hidden
。
我想要一个水平行的 float: left divs 在此容器中。向左浮动的 div 在读取其父级的右边界后自然会推到下面的“行”。即使父级的 height
不允许这样做,也会发生这种情况。这就是它的样子:
我希望它看起来如何:
![右][2] - 删除了已被广告替换的图像小屋图像
注意:我想要的效果可以通过使用内联元素 & white-space: no-wrap
来实现(这就是我在显示的图像中所做的)。然而,这对我来说并不好(由于太长的原因无法在这里解释),因为子 div 需要 float block 级元素。
最佳答案
您可以在容器中放置一个足够宽的内部 div,以容纳所有 float 的 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>
关于html - CSS - 使 div 水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37103/