“宽度：计算（100% / 3）；”不能正常工作

Posted 2023-03-06

【中文标题】“宽度：计算（100% / 3）；”不能正常工作

【英文标题】："width: calc(100% / 3);" not working properly

【发布时间】：2015-08-09 10:04:22

【问题描述】：

我有一个 3 列布局，应该填满整个屏幕，所以在我使用的列上：

width: calc(100% / 3);

比如说我的屏幕是 782px 宽：

782 / 3 = 260.66̅

但是我遇到的问题是在 Internet Explorer 中，它将像素四舍五入到小数点后两位 (260.67)

260.67 * 3 = 782.01

所以在某些宽度下，我失去了 1/3 的页面，因为它包裹在下面。

这是example：

function onResize() 
    $('ul').each(function() 
        var H = eval($(this).height() / $(this).children('li').length);
        $(this).children('li').outerHeight(H);
        $(this).children('li').css('line-height', H + 'px');
        $(this).children('li').outerWidth($(this).width());
    );


var timer;
$(window).resize( function() 
    timer && clearTimeout(timer);
    timer = setTimeout(onResize, 100);
);
onResize();

html 
    height:100%;

body 
    background:black;
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;

ul 
    width: calc(100% / 3);
    display: inline-block;
    overflow:hidden;
    margin:0;
    padding:0;
    float:left;
    height:100%;
    list-style: outside none none;

ul li 
    background: rgb(230,240,163);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(230,240,163,1)), color-stop(0.5, rgba(210,230,56,1)), color-stop(0.51, rgba(195,216,37,1)), to(rgba(219,240,67,1)));
    background: -webkit-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -moz-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: linear-gradient(rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
    text-align:center;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul1">
    <li>Test 1</li>
    <li>Test 2</li>
</ul>
<ul id="ul2">
    <li>Test 3</li>
    <li>Test 4</li>
</ul>
<ul id="ul3">
    <li>Test 5</li>
    <li>Test 6</li>
</ul>

有人知道解决这个问题的优雅方法吗？

我知道我可以使用width: 33.33%，但是我内心的一小部分知道这不是100％的成功。

【问题讨论】：

为什么不用width: 33.33%来代替calc函数呢？

@web-tiki 因为 33.33 * 3 = 99.99，而不是 100

@web-tiki Firefox 可以，AFAIK。

@web-tiki 此外，此网页有时会被加载到另一个屏幕中的 iframe 中，因此它可以具有这些小宽度。

我的意思是，即使在宽屏上，33.33% 的计算也具有低于 1 像素的误差（1920 * 33.33% =639.936 和 639.936 * 3 = 1919.808），这也可以防止最后一个元素在新行上中断并解决您的问题。但是您始终可以使用width:33.333333333% 使计算更加精确。

【参考方案1】：

2020 答案

使用弹性框：

.container 
   width: 242px; /* /3 = 80.66̅  */
   height: 100px;
   
   display: flex;


.col 
  flex: 1 0 0; /* Set flex basis to 0 to force equal widths */


.col1 
  background-color: red;

.col2 
  background-color: green;

.col3 
  background-color: blue;

<div class="container">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
<div>

旧答案

@web-tiki 的建议似乎是：

width:33.33%;

是最好的选择。

【讨论】：

Flex 仅在您只需要一行元素时才有效。如果您想要像 bootstrap 的 col-4 这样的东西，其中第四个元素将进入新行，那么 2020 年的解决方案不是答案。旧的是最好的答案。

【参考方案2】：

更好的选择：

li 
    &:last-child 
        margin-right: -1px;
    

你可以使用：width: calc(100% / 3)

【参考方案3】：

尝试width: calc(100% * 0.33333); 以确保浮点舍入错误在谨慎方面出错或width: calc((100% / 3) - 0.1px);。

【讨论】：

这样做会使生成的宽度为260.64px（使用上面的示例）。事实上它不是.66 真的让我很烦恼：P。这也与@web-tiki 在评论中建议的基本相同（width: 33.33%）

您在寻找数学完美还是可行的解决方案？ :) 目前没有可供消费者使用的屏幕（据我所知）会关心小于 0.3 像素的任何内容。会被浏览器四舍五入，只是在后期？

两全其美。当然，我会努力超越完美，但我会暂时推迟，以防有人有我正在寻找的解决方案。

只是为了摆弄，试试这个不需要JS的（jsfiddle.net/NiklasBr/6wo3q40e/2）。我知道这可能不是一个完整的解决方案，但仍然......

谢谢，但是我的 JS 被简化了，我添加了 line-height 的东西只是为了让我感觉更好：P。 LI 的数量是动态的，因此必须使用 JS 生成高度，而且看起来 calc(100vw / 3) 会产生与 calc(100% / 3) 相同的结果 :(。不过是个好主意！