html – 内联块与许多孩子打破

如果我创建一个容器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/

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

html – 内联块与许多孩子打破

解决方法

相关文章