如何为 #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>
最佳答案
您想使用与字体大小相同的单位: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>
关于css - 保持基于 vw 的恒定 margin ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40507153/