如果我创建一个容器div然后创建一些div子(比如三个),并设置父级显示:inline-block,我得到类似这样的东西
jsfiddle-good
CSS
#container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: 100px; border: 1px solid black; float: left; margin: 2px; }
HTML
<div id="container"> <div class="child">child 1</div> <div class="child">child 2</div> <div class="child">child 3</div> </div>
非常好!我要那个.当我有很多孩子(比如30)jsfiddle-bad时会出现问题
为什么那个空白区域是空的,以及如何让容器div正确缩小尺寸?
解决方法
那个空间在那里,因为盒子不适合那个空间,所以我只增加了10个宽度,没有更多的空间.如果需要,这里是代码的链接:
http://jsfiddle.net/AnDrewpa18/t5Nth/
http://jsfiddle.net/AnDrewpa18/t5Nth/
HTML
<body> <div id="container"> <div class="child">child 1</div> <div class="child">child 2</div> <div class="child">child 3</div> <div class="child">child 1</div> <div class="child">child 2</div> <div class="child">child 3</div> <div class="child">child 1</div> <div class="child">child 2</div> <div class="child">child 3</div> <div class="child">child 1</div> <div class="child">child 2</div> <div class="child">child 3</div> <div class="child">child 1</div> <div class="child">child 2</div> <div class="child">child 3</div> <div class="child">child 2</div> <div class="child">child 2</div> <div class="child">child 2</div> <div class="child">child 2</div> <div class="child">child 2</div> <div class="child">child 2</div> </div>
CSS
#container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: 110px; border: 1px solid black; float: left; margin: 2px; }