许多孩子的内联块中断答案

【问题标题】：inline-block breaks with many children许多孩子的内联块中断
【发布时间】：2014-03-22 08:15:22
【问题描述】：

如果我创建一个容器 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 正确缩小？

【问题讨论】：

如果您删除内联块并可能使用 max-width 和 min-width 它会正确调整大小。只需确保在所有这些单元格下方添加一个清除元素，以使高度扩展以适应内容。
@ChrisBrickhouse 容器需要根据用户窗口调整大小。如果我设置的最大宽度大于用户窗口，那么我仍然有多余的空白。
还有ways to clear an element不加标记。
@Sabe 你可能想四处寻找CSS shrink wrap这个词。有多种方法可以使元素适合其子内容的宽度，每种方法都有优缺点和潜在的兼容性问题。

标签： html css

【解决方案1】：

那个空间在那里，因为盒子无法容纳在那个空间里，所以我只在宽度上增加了 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;
}

【讨论】：

我的容器的宽度是可变的。这个答案只适用于固定宽度的容器。
填充也是固定的吗？