css - 固定宽度为 33.333% 的 3 个容器的 1px 间隙

Question

这很难用语言解释，但我看到 3x 容器的 1 像素线，宽度为 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 的差距!

Answer 1

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