12

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

width: calc(100% / 3);

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

782 / 3 = 260.66̅

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

260.67 * 3 = 782.01

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

这是一个例子：

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% 砰的一声就哭了。

4

3 回答 3

13

尽量width: calc(100% * 0.33333);确保浮点舍入错误在谨慎或width: calc((100% / 3) - 0.1px);.

于 2015-05-27T11:00:36.600 回答
10

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%;

是最好的选择。

于 2015-06-04T13:42:58.717 回答
0

更好的选择：

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

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

于 2018-03-03T09:32:26.727 回答