gpt4 book ai didi

html - "width: calc(100%/3);"工作不正常

转载 作者:技术小花猫 更新时间:2023-10-29 10:28:12 24 4
gpt4 key购买 nike

我有一个 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: calc(100% * 0.33333); 以确保 float 舍入错误在谨慎的一面或 width: calc((100%/3) - 0.1px );

关于html - "width: calc(100%/3);"工作不正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30480442/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com