html - 如何用 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

Foreword

As Quentin mentioned,

Basic maths. * has higher precedence than -.

So you need to use width: calc( 100% * (2/3 - 1/3)); code.

Problem

divs are ill-positioned.

Solution

Inner divs should have position: absolute; and outer div should have position: absolute. Inner divs will be placed relative to outer div and thus, blanks will not occur.

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>

Appendix

If you wish the red div to pass to the right, then add right:0 to it.

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

更改“.twee”的宽度

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

以您的风格添加此 CSS

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