Question

我有一个带有updateHunger()的textblock元素，并且我希望其左右边距彼此成比例，例如，其中一个的宽度为另一个的一半，并保持这些比例随着窗口大小的变化而变化。这在不支持setInterval()或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>

在CSS中，如果没有calc（），流体边距是否可能彼此成比例？

1 个答案: