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。

我想要实现的是：

当容器变大时，容器的填充应增大到100px的maks填充。
当容器变小时，容器的填充应变小，最小填充为10px。

因此，当容器达到特定大小时-填充应动态更改-根据容器大小增加或减少。我试图仅使用CSS来做到这一点-如果可能的话：D

有人知道该怎么做吗？在此先感谢：）

Answer 1

我想您想在所有4个方面都进行填充。使用display flex

    .sections-container {
      border: 1px solid black;
      width: 80%;
      height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .section {
      border: 1px solid black;
      width: 70%;
      height: 100px;
    }

Answer 2

您可以使用宽度这样的变量来实现自适应填充： https://stackblitz.com/edit/typescript-u26fhc?embed=1&file=style.css

对于最小和最大，您需要媒体查询

Answer 3

最好的方法是定义断点并相应地设置填充。

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

3 个答案: