javascript - CSS - 如何在容器内动态填充子项

Question

我正在尝试在容器内进行动态填充，但遇到了一些麻烦。

例如，如果我有这个 html

<div class="sections-container">
  <div class="section"> </div>
  <div class="section"> </div>
</div>

还有这个样式

.sections-container {
  border: 1px solid black;
  width: 90%;
  height: 400px;
  padding: 2.4rem;
}

.section {
  border: 1px solid black;
  width: 100%;
  height: 100px;
  margin-top: 24px;
}

然后容器中的填充被硬编码为 24px。您可以在这个 stackblitz 示例中看到它:https://stackblitz.com/edit/typescript-yw8xyp?file=style.css .

我想要实现的是:

1. 当容器变大时，容器的 padding 应该变大，达到 100px 的 maks padding。
2. 当容器变小时，容器的 padding 应该变小，最小 padding 为 10px。

因此，当容器达到特定大小时 - 然后填充应该动态变化 - 根据容器大小增加或减少。我正在尝试仅使用 CSS 来完成此操作 - 如果可能的话:D

有人知道怎么做吗？提前致谢:)

Answer 1

您可以实现自适应填充，使用宽度变量，如下所示: https://stackblitz.com/edit/typescript-u26fhc?embed=1&file=style.css

对于最小值和最大值你需要媒体查询