html - "shrink-wrapping" float 元素没有像预期的那样工作

Question

我想要一个元素，它的子元素在 width 中增长，子元素向左浮动，我希望父元素在其父元素中居中。当 float 的 child 开始包裹时，一侧的宽度大了 ~20px，我不希望这样。

理论上我有我想要的:

HTML

<div id="postImg"> 
    <span id="centerFloats">
        <div class="boxCon">
        </div>
        <div class="boxCon">
        </div>
        <div class="boxCon">
        </div>
         <div class="boxCon">
        </div>
        <div class="boxCon">
        </div>
        <div class="boxCon">
        </div>
    </span>
</div>

CSS

body{
    padding:0;
    margin:0;
}
div#postImg {
    float:left;
    width:100%;
    position:relative;
    text-align:center;
    background-color:green;
}
#centerFloats {
    display:inline-block;
    text-align:left;
    background-color:red;
}
div.boxCon {
    width:100px;
    height:100px;
    float:left;
    position:relative;
    background-color:#fff;
    border:3px solid #ddd;
    margin-top:10px;
}

fiddle http://jsfiddle.net/SEOplay/qLbvg/

我的问题是父级围绕子级不够紧，所以当 float 框开始下降到下一行时，右侧有一个 ~20px 的间隙。

是什么导致了这种差距？如何让父元素在子元素周围收缩得更紧？

Answer 1

不过我认为您跳过了 Danko 的推理...... 差距是由于当 block 元素的宽度太小而无法彼此相邻时，它们会向下移动到下一行。如果每个框的宽度为 50px，并且您没有填充，它们将完全适合，6 个横跨，在 300px 空间中。

如果该空间减小到 299px，第 6 个框不再适合，因此它向下 float 到下一行，您看到的空间是剩余的 5 个框“向左浮动”和 49px 差距是自然的。

我可以设置一个 fiddle ，但我们已经看到 2 个显示了两个可用选项。我不太确定还能如何回答这个问题......