如何用计算函数填空?

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>