PC 与移动浏览器 - 使用百分比的相同宽度列 - 移动不准确

Question

所以，我正在尝试使用百分比来布置一些宽度相等的列以进行响应式设计。我这样做的方法是计算每列的百分比（也考虑右边距）并让最后一列占据剩余的宽度，同时得到 100%。

示例：3 列，30% 宽 第 1 列和第 2 列的宽度为 30%，边距为 5%。 第 3 列将只有 30%，没有边距。

数学： 30 + 5 + 30 + 5 + 30 = 100%

为了得到这个结果，我正在做以下事情：

HTML

<div class="columns" id="exmpl1">
    <div class="col"> <span class="buffer">1</span>
    </div>
    <div class="col"> <span class="buffer">2</span>
    </div>
    <div class="col_last"> <span class="buffer">3</span>
    </div>
    <div class="clear"></div>
</div>

CSS

.col {
    float: left;
}
.col_last {
    width: auto;
    float: none;
    overflow: hidden;
    margin-right: 0;
}
#exmpl1 .col {
    background-color: #205CDC;
    width: 30%;
    margin-right: 5%;
}
#exmpl1 .col_last {
    background-color: #D02020;
}
.buffer {
    padding: 40% 0;
    display:block;
    text-align: center;
    font-size: 3em;
}
.clear {
    clear: both;
    float: none;
}

这里有更多内容：https://jsfiddle.net/0kwbabjz/1/

现在，有些人可能会问为什么不将最后一列设置为相同的宽度？一些浏览器（通常较旧）似乎计算不正确，最后一列最终转到下一行。此方法可确保最后一个仅占用剩余的空间。另外，对于不均匀的列，这样做会更方便。

现在，问题出在移动浏览器上。我不知道他们是否不能做简单的数学运算或什么，但我发现这种方法几乎总是使最后一列看起来比其他列大。我在上面测试了我的 Fiddle，5 列示例的最后一列确实看起来更大。当试图显示以相同大小为目标的图片库时，这是一个大问题。

这是移动浏览器的限制，它们不能做精确的数学运算，还是可以做其他事情？ Internet Explorer 7 可以毫无问题地进行此计算，所有 PC 浏览器也可以。

谢谢。

Answer 1

只需将宽度设为 30%。它将使所有 3 列宽 30%。

宽度 = 30*3 = 90%

保证金：5%+5% = 10%

总计：100%

#exmpl3 .col {
    background-color: #0FE;
    width: 30%; /*make the width 30% */
    margin-right: 5%;
}

.col {
    float: left;
}
.col_last {
    width: auto;
    float: none;
    overflow: hidden;
    margin-right: 0;
}
#exmpl1 .col {
    background-color: #205CDC;
    width: 30%;
    margin-right: 5%;
}
#exmpl1 .col_last {
    background-color: #D02020;
}
#exmpl2 .col {
    background-color: #DC5C20;
    width: 19%;
    margin-right: 1.25%;
}
#exmpl2 .col_last {
    background-color: #20D020;
}
#exmpl3 .col {
    background-color: #0FE;
    width: 30%;
    margin-right: 5%;
}
#exmpl3 .col_last {
    background-color: #206000;
}
.buffer {
    padding: 40% 0;
    display:block;
    text-align: center;
    font-size: 3em;
}
.clear {
    clear: both;
    float: none;
}
h2 {
    text-align: center;
    margin: 0 0 10px;
    color: #400094;
    background-color: #DBAB00;
}
p {
    margin: 0 0 4em;
    text-align: center;
}
strong{
    font-size: 1.75em;
    line-height: 1em;
}

<h2>EXAMPLE 1 - CORRECT MATH</h2>

<div class="columns" id="exmpl1">
    <div class="col"> <span class="buffer">1</span>

    </div>
    <div class="col"> <span class="buffer">2</span>

    </div>
    <div class="col_last"> <span class="buffer">3</span>

    </div>
    <div class="clear"></div>
</div>
<br /><br />
<div class="columns" id="exmpl2">
    <div class="col"> <span class="buffer">1</span>
    </div>
    <div class="col"> <span class="buffer">2</span></div>
    <div class="col"> <span class="buffer">3</span></div>
    <div class="col"> <span class="buffer">4</span>
    </div>
    <div class="col_last"> <span class="buffer">5</span>
    </div>
    <div class="clear"></div>
</div>

<p>Math of 30 + 5 + 30 + 5 + remaining (which is 30) equals 100 percent. <br />
    Math of (19 + 1.25) * 4 + one more 19 = 100% too.<br />
    Math is done correctly.  In this example, the final column appears OK on the PC, but <strong>bigger</strong> on mobile browsers...</p>

<h2>EXAMPLE 2 - EMULATING MOBILE BROWSERS</h2>

<div class="columns" id="exmpl3">
    <div class="col"> <span class="buffer">1</span>

    </div>
    <div class="col"> <span class="buffer">2</span>

    </div>
    <div class="col_last"> <span class="buffer">3</span>

    </div>
    <div class="clear"></div>
</div>