css - 在 CSS 中，如果没有 calc()，流体边距是否可能相互成比例？

Question

我有一个带有 max-width 的文本 block 元素，我希望它的左右边距彼此成一定比例，假设其中一个是元素宽度的一半其他，并随着窗口大小的变化保持这些比例。这在不支持 calc() 或 flexbox 的旧浏览器中是否可行？我想我真正想问的是它是否可以用百分比来实现？

    +--------+-----------+----------------+    |        |           |                |    | margin | textblock |     margin     |    |        |           |                |    |  1/2x  |           |       1x       |    |  ←--→  |           |  ←----------→  |    |        |           |                |    +--------+-----------+----------------++------------+-----------+------------------------+|            |           |                        ||   margin   | textblock |         margin         ||            |           |                        ||    1/2x    |           |           1x           ||  ←------→  |           |  ←------------------→  ||            |           |                        |+------------+-----------+------------------------+

Answer 1

您可以使用 flexbox 和隐藏元素来模拟这种行为，您可以在其中应用不同的 flex-grow 来控制如何划分可用空间:

.container {
 display:flex;
}
.box {
  max-width:300px;
  width:100%;
  height:50px;
  background:red;
}
.container:before {
  content:"";
  flex-grow:1;
}
.container:after {
  content:"";
  flex-grow:2;
}

<div class="container">
<div class="box"></div>
</div>