0

私の理解では、1vw はビューポートの幅の 1/100 であるため、特定のビューポート全体で 100vw になります。ただし、幅が 25vw の 2 つの div がある場合、1 つは右端から 25vw に配置され、1 回は左端から 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>

4

1 に答える 1

2

幅自体に境界線のサイズを含める必要があります。実際には 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

于 2014-10-24T16:30:30.030 に答える