Question

我有一个包含4个div的包装器，它们全部浮动到左边并且在一行中。当我缩小时，第4个div下降到底部。我能想到的唯一可能的问题是包装器的宽度减小，从而导致它不能包含第四个，但是包装器有一个固定的宽度，所以我确定这不是问题。

这是html：

<div id="wrapper">    
    <div id="panel">
        <div id="panel1" class="panelcell"></div>
        <div id="panel2" class="panelcell"></div>
        <div id="panel3" class="panelcell"></div>
        <div id="panel4" class="panelcell"></div>
        <div class="spacer" style="clear: both;"></div>
    </div>
</div>

这是css：

#wrapper{
    width: 1280px;
}
#panel{
    width:100%;
}

#panel .panelcell{
    width: 318.75px;
    height: 213px;
    float: left;
    border-right: 1px solid white;
}

.panelcell {
    background-color: gray;
}

#panel1{
    border-right: 1px solid white;
}

Answer 1

我认为问题的根源在于缩小时浏览器如何呈现“318.75px”的宽度（因为，你不能将0.75px渲染到屏幕上）。根据元素随着缩小而缩放的方式，元素的宽度最终可能会增加到大于父元素的宽度，从而导致最后一个浮动元素被推送到新行。

解决这个问题的方法（我能想到的）是使用百分比宽度，而不是小数像素宽度。将#panel .panelcell的定义更改为此应该可以为您提供所需内容：

#panel .panelcell{
    width: 25%;
    height: 213px;
    float: left;
    border-right: 1px solid white;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

box-sizing: border-box确保在确定元素的25％宽度时也考虑1px边框。这是一个updated JSFiddle来展示它的成就。（当你缩小时，第四个元素不应该突破到新的一行。）如果这不是你想要的，请告诉我，我会很乐意进一步帮助你！

Answer 2

这似乎是你的右边1px实体的一个问题，它增加了超过1280的宽度

Answer 3

没有测试它，但我认为你对包装器不能包含<div>的猜测是正确的：4 *（318,75px + 2px）= 1283px＆gt; 1280像素

只需增加包装的宽度即可。

为什么这个div会缩小到窗口缩小的下一行？

3 个答案: