" width:calc(100%/3);"工作不正常 [英] "width: calc(100% / 3);" not working properly
问题描述
我有3列布局,应该可以覆盖整个屏幕,因此在我正在使用的列上:
I have a 3 column layout that should fill the whole screen so on my columns I am using:
width: calc(100% / 3);
例如,假设我的屏幕为782px宽:
So lets say for example my screen is 782px wide:
782/3 =260.66̅
782 / 3 = 260.66̅
但是我遇到的问题是在Internet Explorer中,它将像素四舍五入到小数点后两位(260.67)
However the problem I have is in Internet Explorer, where it rounds the pixels to two decimal places (260.67)
260.67 * 3 = 782.01
260.67 * 3 = 782.01
因此,在某些宽度下,由于包裹在下面,所以我丢失了1/3的页面.
So at certain widths, I lose a 1/3 of my page as it wraps underneath.
这是一个示例:
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>
有人知道解决这个问题的优雅方法吗?
Does anyone know of an elegant way of solving this problem?
我知道我可以使用 width:33.33%
,但是我当中有一小部分人在哭,知道不是100%爆炸.
I know I could use width: 33.33%
, however there's a small part of me inside that cries knowing that it's not 100% bang on.
推荐答案
2020年答案
使用flexbox:
2020 Answer
Use flexbox:
.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的建议似乎与:
It would seem that the suggestion by @web-tiki with:
width:33.33%;
是最好的选择.
这篇关于" width:calc(100%/3);"工作不正常的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!