html - CSS 33.3333% 留下一个像素

Question

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

我尝试了以下方法。

• 33.333333333%
• 33.3334%
• 计算 (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;
}

编辑

感谢 fiddle ，我更新了它以匹配问题

fiddle 链接:http://jsfiddle.net/h8p4A/3/

Answer 1

这是一个四舍五入的问题。您可以将容器的高度(也就是“导航”)设置为 99%，然后将每个内部元素的高度简单地设置为 33%。我认为这可能是一个合理的权衡......