固定3个容器的1px间隙，宽度为33.333％

Question

这很难用文字来解释，但是我看到一个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差距！

Answer 1

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

Answer 2

您可以尝试使用flex来解决此问题，并为旧版浏览器支持float

另一个解决方案是将其中一个时间项的宽度设置为33.3334%（虽然它可能无处不在，但我看到width: 100%元素产生间隙的情况）

Answer 3

试

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