如果我创建一个容器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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
