Question

如何在HTML中以整个屏幕的百分比放置对象，而不仅仅是放置在前一个对象旁边？例如，<div>位于屏幕宽度50％，屏幕高度30％的位置。

对此有一些要求：

无论其他对象如何，都应该能够按照整个屏幕的百分比将对象放置到所需的位置。
对象应该能够在同一位置包裹其他对象。

对不起，英语不好：|

Answer 1

尝试此CSS

Tui Parakeet

Answer 2

我不确定您的问题。让我尝试回答。在CSS中，我们将变量vh称为视口高度，将vw称为视口宽度。

这个想法是将元素的高度的30％设置为30vh，宽度的50％设置为50vw。我们可以将父元素设置为相对，将要设置位置的子元素设置为绝对位置。

类似于下面的内容。谢谢

body {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  background: #000;
}

#screen .child {
  position: absolute;
  top: 30vh;
  left: 50vw;
  background: red;
  width: 100px;
  height: 50px;
}

<div id="screen">
  Parent
  <div class="child">
  </div>
</div>

HTML：如何相对于屏幕尺寸放置对象？

2 个答案: