Question

我想要一个以 width 增长的元素及其子元素，子元素向左浮动，我希望父元素在其父元素中居中。当漂浮的孩子开始包裹时，一边的宽度大约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;
}

小提琴 http://jsfiddle.net/SEOplay/qLbvg/

我的问题是父母在孩子周围不够紧，所以当浮动的盒子开始下降到下一行时，右侧有一个~20px的间隙。 < / p>

导致这种差距的是什么？如何让父元素在孩子周围缩小？

Answer 1

我认为你跳过Danko的推理虽然......这个差距是由于当宽度太小而不能让它们彼此相邻时块元素向下移动到下一行的事实。如果每个方框的宽度为50px，并且您没有填充，则它们将在300px空间内完全适合6个。

如果该空间减少到299px，则第6个框不再适合，因此它会向下浮动到下一行，您看到的空间是剩下的5个“向左浮动”框和{{1}差距很自然。

我可以设置一个小提琴，但我们已经看到2显示两个可用的选项。我不确定怎么回答这个......

Answer 2

此问题的解决方案是制作父元素text-align:justify;和子元素display:inline-block;。

<强> 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:justify;
        background-color:red;
    }
    div.boxCon {
        width:100px;
        height:100px;
        display:inline-block;
        position:relative;
        background-color:#fff;
        border:3px solid #ddd;
        margin-top:10px;
    }

<强> 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>

<强>小提琴

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

Answer 3

如果子元素必须具有固定的宽度，并且您希望居中的父包装器与内部元素“缩小”，那么实际上没有好办法使其工作。 Flexbox很可能是最好的解决方案，但目前并不适用于所有浏览器。

使用此功能的黑客就是使用媒体查询。例如：

@media (max-width: 600px){
    #centerFloats { width:500px; }
}

有关完整示例，请参阅：http://jsfiddle.net/hG5KT/

注意：在div标记内使用span是无效的HTML，因为您在内联元素中使用了块级元素。只需使用div代码而不是span #centerFloats。

“收缩包装”浮动元素的效果不如预期

3 个答案: