0

JSFIDDLE

我有一个包装器，里面有 4 个 div，它们都向左浮动并排成一行。当我缩小时，第 4 个 div 下降到底部。我能想到的唯一可能的问题是包装器的宽度减小，从而导致它无法包含第 4 个，但是包装器具有固定的宽度，所以我确定这不是问题。

这是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;
}
4

3 回答 3

1

没有测试它，但我认为您对包装器无法包含<div>'s 的猜测是正确的：4*(318,75px+2px) = 1283px > 1280 px。

只需增加包装器的宽度就可以了。

于 2013-08-07T18:08:49.597 回答
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 边框。这是一个更新的 JSFiddle来展示它所取得的成果。（当您缩小时，第四个元素不应换行。）如果这不是您要查找的内容，请告诉我，我很乐意为您提供进一步的帮助！

于 2013-08-07T18:24:02.537 回答
0

您的边框右 1px 实体似乎有问题，它正在增加超过 1280 的宽度

于 2013-08-07T18:02:21.943 回答