【发布时间】：2015-03-02 05:41:32
【问题描述】：
您好，我正在尝试显示 5 列布局，但第五列显示在下方。
.five-col{
float:left;
width: 20%;
}
我检查了布局，宽度为 1903 像素 (100%)。而且每个.five-col都是381px所以381*5=1905px是解决方案吗？
【问题讨论】：
标签： css google-chrome safari rounding-error
【发布时间】：2015-03-02 05:41:32
【问题描述】：
没有发现任何问题：http://jsfiddle.net/4uwckjzh/
HTML：
<div class="five-col"></div>
<div class="five-col"></div>
<div class="five-col"></div>
<div class="five-col"></div>
<div class="five-col"></div>
CSS：
.five-col{
height: 50px;
border: 1px solid black;
box-sizing: border-box;
}
.five-col{
float:left;
width: 20%;
}
也许是因为缺少盒子尺寸？
【讨论】：
-
感谢您的回答。但这对我不起作用。这取决于您的屏幕分辨率。谷歌浏览器不适用于亚像素。因此，当它舍入时，结果与布局重叠，第五个元素下降。
-
在我的 jsfiddle 中水平调整窗口大小时没有问题。
-
这里，现在他们有一个 1903px 宽度的父 div：jsfiddle.net/4uwckjzh/1
-
我很确定您只是忘记将 box-sizing 设置为 border-box。
-
我添加 box-sizing:border-box;而且我仍然有问题:(我尝试了您的示例并且可以工作，但是在我的代码中没有