CSS 33.3333％留下一个像素

Question

令人沮丧的问题，我在其他3个div里面有一个div，每个div应该是33％（三分之一）。问题是我总是有一个额外的像素。

我尝试了以下内容。

• 33.333333333％
• 33.3334％
• calc（100％/ 3）

这是显示问题的图像

这是我的HTML

<div class="navigation">

    <div class="navigation-item">
        <div class="navigation-item-inner">
            <img src="http://placekitten.com/50/50">
            <h5>Running</h5>
            Whatever fits your need
        </div>
    </div>

    <div class="navigation-item">
        <div class="navigation-item-inner">
            <img src="http://placekitten.com/50/50">
            <h5>Running</h5>
            Whatever fits your need
        </div>
    </div>

    <div class="navigation-item">
        <div class="navigation-item-inner">
            <img src="http://placekitten.com/50/50">
            <h5>Running</h5>
            Whatever fits your need
        </div>
    </div>

</div>

这是我的CSS

.navigation
{
    float: right;
    width: 30%;
    height: 100%;
}

.navigation-item
{
    display: table;
    width: 100%;
    height: 33.3333%;
    padding-left: 20px;
}

.navigation-item-inner
{
    display: table-cell;
    vertical-align: middle;
}

修改

感谢小提琴，我更新了它以匹配问题

小提琴链接：http://jsfiddle.net/h8p4A/3/

Answer 1

这是一个四舍五入的问题。您可以将容器的高度（因此＆＃34;导航＆＃34;）设置为99％，然后将每个内部元素的高度设置为33％。我认为这可能是一个合理的权衡......

Answer 2

除非您指定了百分比所依据的确切像素高度（我假设您在这里使用了窗口高度，所以您无法控制这个高度），您和＃39 ; ll总是具有至少一个像素的舍入误差。当使用百分比接近1/3时，由于您不知道浏览器将如何舍入百分比，因此更糟糕。

要处理垂直舍入中的额外像素，我建议您接受它并使用父容器的背景颜色，该背景颜色与最后一项的下边缘的颜色匹配或近似。使问题不那么明显。

对于填充宽度的浮动元素，我建议您确保从不使用百分比中的小数（或仅使用0.5％并确保父容器是偶数个像素宽，使用max-width等），以便舍入错误不会导致最后一个项目换行。

Answer 3

你可以使用：last-child并使最后.navigation-item 33.4％？

.navigation-item:last-child
{
    display: table;
    width: 100%;
    height: 33.4%;
    padding-left: 20px;
}