修复 3 个宽度为 33.333% 的容器的 1px 间隙答案

【问题标题】：Fixing the 1px gap of 3 container with width of 33.333%修复 3 个宽度为 33.333% 的容器的 1px 间隙
【发布时间】：2016-11-18 12:30:59
【问题描述】：

这很难用语言解释，但我看到一个 1 像素线的 3x 容器，宽度为 33.3333%，我无法将其更改为 material-ui 的一部分

<div class="container">
    <div class="panel" style="width:width of 33.3333%">
        <!-- Content here -->
    </div>
    <div class="panel" style="width:width of 33.3333%">
        <!-- Content here -->
    </div>
    <div class="panel" style="width:width of 33.3333%">
        <!-- Content here -->
    </div>
</div>

所以这就是我得到的，我只是因为它的 33.333%，将其设置为 25% 或 50% 并且问题消失了，我用一点红色（油漆）标记了像素线。

这是material-ui <gridList>, <GridItem> 和 <Cards>，这很令人沮丧。

编辑

尝试33.33 / 33.33 / 33.34 仍然返回 1px 的差距！

【问题讨论】：

这很可能发生在 Chrome 而不是 Firefox 上，对吗？
@BramVanroy我没有在firefox中试过这个，chrome是它
这个问题has been asked frequently 但这是一个错误，如下所述，一个舍入问题。恐怕没有“好的”解决方案可用。
@BramVanroy 好的，谢谢。

标签： css material-ui

【解决方案1】：

33.333 与 1/3 不同，因此可能存在舍入问题。我建议选择整数值（例如 33、33、34）来简化布局引擎必须完成的舍入。

【讨论】：

【解决方案2】：

试试

.container .panel:last-child{
    margin-right:-1px;
}

【讨论】：

【解决方案3】：

您可以尝试使用flex 来解决此问题，对于旧版浏览器，您可以回退到float

另一种解决方案是将其中一个时间项的宽度设置为 33.3334%（尽管它可能并非在任何地方都有效，但我已经看到元素上的 width: 100% 产生间隙的情况）

【讨论】：

我已经尝试了 33.3334% 但没有运气。如果我将它设置为 33.33 / 33.33 / 33.34，它就会低于（不再是 100%）ffs。