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

所以，我正在做的是尝试使用百分比来布置一些宽度相等的列，以进行响应性设计。我要做的是计算每一列的百分比（也包括右页边距），让最后一列占据剩余的宽度，同时得到100%的总宽度

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

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

为了得到这个结果，我做了以下工作：

HTML 这里有一把小提琴，还有更多：

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

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

这是移动浏览器的一个局限性吗？他们不能做精确的计算吗？或者还有其他的事情可以做吗？InternetExplorer7可以像所有PC浏览器一样，毫无问题地完成这项计算

---

谢谢。

把宽度改为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{
浮动：左；
}
科卢先生{
宽度：自动；
浮动：无；
溢出：隐藏；
右边距：0；
}
#示例1.col{
背景色：#205CDC；
宽度：30%；
保证金权利：5%；
}
#示例1.最后一列{
背景色：#D02020；
}
#exmpl2.col{
背景色：#DC5C20；
宽度：19%；
右边距：1.25%；
}
#例2.最后一列{
背景色：#20D020；
}
#示例3.col{
背景色：#0FE；
宽度：30%；
保证金权利：5%；
}
#例3.最后一列{
背景色：#206000；
}
.缓冲器{
填充：40%0；
显示：块；
文本对齐：居中；
字号：3em；
}
.清楚{
明确：两者皆有；
浮动：无；
}
氢{
文本对齐：居中；
利润率：0.10px；
颜色：#400094；
背景色：#DBAB00；
}
p{
边缘：0.4em；
文本对齐：居中；
}
强壮的{
字号：1.75em；
线高：1米；
}

示例1-正确的数学
1.
2.
3.



1.
2.
3.
4.
5.
30+5+30+5+剩余（即30）的数学等于100%

（19+1.25）*4+1+19的数学也等于100%。

数学算对了。在本例中，最后一列在PC上显示正常，但在移动浏览器上显示较大

示例2-模拟移动浏览器
1.
2.
3.

我们尝试使用宽度：30%而不是19%，然后你会发现没有区别。我认为这也取决于你给两个专栏的页边，而不是最后一个专栏的页边。还是要多挖一点。好吧，拉胡尔·库马尔，他没有问如何实现结构，但为什么在移动布局中第三个专栏是不同的。请用time.ThanxHi读回问题。我知道这在某些浏览器中是可行的，但我不想在最后一篇专栏文章中这样做。只需将width:auto和overflow:hidden设置为强制它占用剩余空间。我想我可能不得不以这个速度手动计算(

.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;
}

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