Question

我的屏幕分为两半，左边= 73％，右边= 23％现在我使用@media进行大屏幕，使其比1200px高出60％和40％

但是当我调整1200px以上时，右侧消失了

我不明白为什么

一个简单的例子https://jsfiddle.net/quorton/v67zo9mx/ 如果您调整浏览器的大小，则右侧消失

我尝试过IE和Chrome（最新版本）

    <html>
<body id="body" >
    <form id="form" method="post" action="">
        <div id="left">
            text
        </div>
        <div id="right" style="background:blue;">
            <div>
                text2
            </div>
        </div>
    </form>
</body>        
</html>

CSS

    @media screen and (max-width: 400px){
    #left {
        float: left;
        padding-left: 1%;
        width: 73%;
        height: 100vh;
    }
}

@media screen and (min-width: 401px){
    #left {
        float: left;
        padding-left: 1%;
        width: 60%;
        height: 100vh;
    }
}

@media screen and (max-width: 400px){
    #right {
        float: right;
        padding-right: 1%;
        width: 23%;
    }
}

@media screen and (min-width: 401px){
    #right {
        float: right;
        padding-right: 1%;
        width: 40%;
    }
}

Answer 1

它不会消失，它只是位于页面的底部，因为左侧宽度为60％+ 1％padding-left，右侧宽度为40％+ 1 padding-right的百分比，此外，102％，因此太多而无法相互显示。

对于响应版本，它与其他值一样。

重新计算左侧和右侧div的值，以使元素彼此相邻。

例如：

@media screen and (max-width: 400px){
    #left {
        float: left;
        padding-left: 1%;
        width: 72%;
        height: 100vh;
    }
}

@media screen and (min-width: 401px){
    #left {
        float: left;
        padding-left: 1%;
        width: 59%;
        height: 100vh;
    }
}

@media screen and (max-width: 400px){
    #right {
        float: right;
        padding-right: 1%;
        width: 22%;
    }
}

@media screen and (min-width: 401px){
    #right {
        float: right;
        padding-right: 1%;
        width: 39%;
    }
}

Answer 2

这是修复。 <强>箱上浆

* {
  box-sizing: border-box;
}
@media screen and (max-width: 400px) {
  #left {
    float: left;
    padding-left: 1%;
    width: 73%;
    height: 100vh;
  }
  #right {
    float: right;
    padding-right: 1%;
    width: 23%;
  }
}
@media screen and (min-width: 401px) {
  #left {
    float: left;
    padding-left: 1%;
    width: 60%;
    height: 100vh;
  }
  #right {
    float: right;
    padding-right: 1%;
    width: 40%;
  }
}

<div id="left" style="background:gray;">
  text
</div>
<div id="right" style="background:yellow;">
  <div>
    text2
  </div>
</div>

当在css div中使用@media消失时

2 个答案: