Question

根据我的理解，1vw是视口宽度的1/100，因此在给定视口中有100vw。然而，当我有两个宽度为25vw的div时，一个位于距右边缘25vw，一个位于距离左边缘25vw，它们重叠很多。这适用于多个浏览器，为什么会出现这种情况？

#sign_up_button{
    position: fixed;
    padding: none;
    top: 68vh;
    right: 25vw;
    width: 25vw;
    border: solid;
}
#login_button{
    position: fixed;
    top: 68vh;
    left: 25vw;
    width: 25vw;
    border: solid;
}

<div id="sign_up_button">Test</div>
<div id="login_button">Test</div>

Answer 1

您需要在宽度本身中包含边框大小：实际上您的div宽度为25vw + <border size>，因此请使用box-sizing属性以在宽度定义中包含边框

div {
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

视口单元VW重叠 - 每个视口小于100 vw？

1 个答案: