CSS – 使divalignment水平

我有一个固定的宽度和高度的容器div,溢出:隐藏。

我想要一个水平行的float:在这个容器内的左边的div。 当他们阅读父母的正确界限之后,浮动的左边自然会自动推到下面的“路线”上。 即使父母的身高不应该这样,也会发生这种情况。 这是这样的:

![Wrong] [1] – 删除了已被广告replace的图像小屋图像

我想如何看:

![右] [2] – 删除已被广告replace的图像小屋图像

注意:我想要的效果可以通过使用内联元素和空白来实现:no-wrap(这就是我在图中所做的操作)。 然而,这对我来说并不好(因为在这里解释太冗长的原因),因为孩子们需要漂浮块级元素。

你可以把一个内部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> 

对于所有子divs ,父divstyle="float: left" style="overflow:hidden"对于让旧版浏览器(如IE7和更低版本)水平alignment非常重要。

对于现代浏览器,您可以对所有子divs使用style="display: table-cell" ,并且它会正确地水平渲染。

你可以使用clip属性:

 #container { position: absolute; clip: rect(0px,200px,100px,0px); overflow: hidden; background: red; } 

注意position: absoluteoverflow: hidden需要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> 

Float:left,display:inline-block如果超出容器的宽度,将无法水平alignment元素。

重要的是要注意,如果元素必须水平显示,容器不应该包装: white-space: nowrap

将它们浮起来。 在Chrome中,至less,你不需要在LucaM的例子中有一个包装, id="container"

你现在可以使用CSS flexbox水平和垂直alignmentdiv如果你需要的话。 一般公式就是这样

 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 */ ; }