html - 如何用计算函数填空？

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

两个问题。

第一:基础数学。 * 的优先级高于 -。您需要 parent 强​​制执行减法。

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

其次:默认情况下，Div 元素是 display: block，因此无论如何都会开始新行。你需要 display: inline-block 或类似的东西。

第三:舍入问题。当像素百分比不是整数值时，您最终会进行四舍五入，并且在四舍五入后总和可能会超过 100%，然后换行。

我只想使用 Flexbox 来代替。