如果我创建一个容器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 举报,一经查实,本站将立刻删除。