如何用calc函数填充空白？

Question

我试图用calc填充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);


}

Answer 1

两个问题。

第一：基础数学。 *的优先级高于-。你需要parens来强制你的减法发生。

width: calc( 100% * (2/3 - 1/3) );

第二：Div元素默认为display: block，因此无论如何都会开始新行。您需要display: inline-block或类似的东西。

第三：舍入问题。如果像素的百分比不是整数值，则最终会进行舍入，并且在舍入后总计可以超过100％并且回滚包装。

我只是为此使用Flexbox。

Answer 2

前言

正如昆汀所说，

  

基础数学。 *的优先级高于-。

因此您需要使用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>

Answer 3

更改＆＃39; .twee＆＃39;的宽度

.twee {width: calc( 100% * 1/3);} 

以您的风格添加此CSS

#container, .box, .twee {float:left}