css - 如何在使用绝对定位元素调整布局大小时保持比例

Question

我收到了一堆页面，需要用奇怪的不规则布局进行编码。下面是我需要创建的示例。

关键点是；

• 元素需要根据模型进行像素完美定位。
• 调整窗口大小时，所有元素和位置都需要缩小/放大按比例计算。
• 容器的大小也需要按比例调整，因为布局下会有更多内容。

考虑到每个元素都需要有特定的定位，显然使用绝对定位。我还注意到，因为布局需要保持比例，所以定位需要以百分比来完成。

对于图像，我可以将宽度设置为自动百分比和高度。元素可以沿 x 轴以百分比定位。

但是当我需要从顶部定位时，问题就出现了。

如果我将一个元素声明为距顶部 20%，则当我调整页面大小时，此位置不会按比例更改。此外，包含 block 需要有一个声明的高度。

我能看到这个工作的唯一方法是使用一些 javaScript 技巧。

但这对于看似简单的布局来说似乎很繁琐。并且不建议依赖 javaScript 来维护布局。

一定有更好的解决方案，我经常看到这样的不规则布局。

我研究过 Flexbox，但我想不出它在这种情况下如何帮助我。

您将如何处理这种布局？

Answer 1

您可以将所有内容包装在一个包装器中，该包装器使用“填充底部技巧”来根据其宽度保持其比例。由于父元素的高度现在取决于文档的宽度，因此您为子元素的 top 和 bottom 属性指定的所有百分比值都将受到宽度的影响页面的宽度，而不是高度。

main {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 120%;
}

div {
  background: red;
  position: absolute;
}

.one {
  width: 40%;
  height: 40%;
  top: 10%;
  left: 40%;
}

.two {
  width: 50%;
  height: 20%;
  top: 55%;
  left: 15%;
}

.three {
  width: 20%;
  height: 30%;
  top: 60%;
  left: 70%;
}

<main>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</main>