如何用计算函数填空?
How to fill in the blanks with calc function?
我正在尝试用计算器填充 div 中的空白。我用 2/3 填充第一个 div,但 1/2 应该用红色填充。现在红色条将位于蓝色条下方。我的计算有什么问题?
查看实际效果:http://codepen.io/anon/pen/PqxVeq
.box {
width: 66.666%;
width: calc( 100% * 2/3);
height: 80px;
background: #09F;
}
.twee {
background: red;
height: 80px;
width: calc( 100% * 2/3 - 1/3);
}
两个问题。
第一:基础数学。 *
的优先级高于 -
。您需要 parens 强制先执行减法。
width: calc( 100% * (2/3 - 1/3) );
其次:Div 元素默认为 display: block
,因此无论如何都会开始新行。您需要 display: inline-block
或类似的东西。
第三:四舍五入问题。当像素百分比不是整数值时,您最终会四舍五入,四舍五入后总数可能会超过 100%,然后换行。
我只想使用 Flexbox 来代替。
更改“.twee”的宽度
.twee {width: calc( 100% * 1/3);}
将此 css 添加到您的样式中
#container, .box, .twee {float:left}
前言
正如昆汀所说,
Basic maths.
*
has higher precedence than-
.
所以你需要使用width: calc( 100% * (2/3 - 1/3));
代码。
问题
div
位置不对。
解决方案
内部 div
应该有 position: absolute;
,外部 div
应该有 position: absolute
。
内部 div
将相对于外部 div
放置,因此不会出现空白。
window.onload = function() {
var box = document.querySelector('#container .box');
box.innerText = getComputedStyle( box ).width
}
#container {
width: 300px;
height: 100px;
background: #444;
position:relative;
}
.box {
width: 66.666%;
width: calc( 100% * 2/3);
height: 80px;
background: #09F;
position:absolute;
}
.twee {
background: red;
height: 80px;
width: calc( 100% * (2/3 - 1/3));
position:absolute;
}
<div id="container">
<div class="box"></div>
<div class="twee"></div>
</div>
附录
如果你希望红色div
传到右边,那么就加上right:0
。
window.onload = function() {
var box = document.querySelector('#container .box');
box.innerText = getComputedStyle( box ).width
}
#container {
width: 300px;
height: 100px;
background: #444;
position:relative;
}
.box {
width: 66.666%;
width: calc( 100% * 2/3);
height: 80px;
background: #09F;
position:absolute;
}
.twee {
background: red;
height: 80px;
width: calc( 100% * (2/3 - 1/3));
position:absolute;
right:0
}
<div id="container">
<div class="box"></div>
<div class="twee"></div>
</div>