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 ，父div和style="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: absolute和overflow: 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 */ ; }
