css - 保持基于 vw 的恒定 margin

Question

如何为 #more 留出余量，以便在调整窗口大小时它始终与 #logo 保持相同的距离？

全屏查看下面的代码并调整窗口大小，您会看到从 1 到 2 的距离发生了变化。

感谢您的帮助。

body {
  font-size: 5vw;
  font-family: Arial;
  letter-spacing: 1px;
}
#logo {
  top: 10px;
  left: 10px;
  position: fixed;
}
#more {
  top: 10px;
  left: 50px;
  position: fixed;
}

<div id=logo>1</div>
<div id=more>23456789</div>

Answer 1

您想使用与字体大小相同的单位:vh。

2 个重要的旁注:

• 如果您想真正响应，请不要使用 position: fixed
• 不要在 css 中使用 id，不允许在 html 中重复使用它们。

body {
  font-size: 5vw;
  font-family: Arial;
  letter-spacing: 1px;
}
#logo {
  display:inline;
}
#more {
  display:inline;
  padding-left: 2vw;
}

<div id=logo>1</div>
<div id=more>23456789</div>