Question

我的一个页面上有两个div并排，当缩小为移动时，我需要它们叠加在一起，我只是想弄清楚它为什么不起作用。我有一些我正在尝试的@media代码，但它没有做任何事情。非常感谢一些帮助，提前感谢！

这是div的html：

 <div id="page3">
            <div id="left3">
              <img src="images/entertowin_03.png">
                <h4>•text<br>•text<br>•text<br></h4>
            </div>

            <div id="right3">
            <img src="images/winnermap_06.png">

            </div>



        </div>
       <div id="dog">
        <image src="images/barrybottom_04.jpg"></image>
           <h3><a href="#neheader" class="class1">Back to top</a></h3>
        </div>

和我有的CSS ...

#page3 {
       background-image: url("../images/page3back_01.jpg");
    background-size: cover;
    width: 100%;


    min-height: 600px;
    font-size: 16px;
    height: 2em;
    display: flex;
    overflow:hidden;


}


#left3 {
    width:100%;
    padding-top: 5%;
    margin-left: 10%;
    max-width: 440px;
    height: 330px;
    display: block;
    flex: 0 0 65%;



}



#right3 {
    width: 100%;
    padding-top: 5%;
    margin-left: 10%;
    max-width: 440px;
    height: 330px;
    display:block;
    flex: 1;
    padding-top: 7%;


}

然后这是我找到的响应式媒体查询的代码，我无法开始工作：

/** Responsive **/


#left3 {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#right3 { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #left { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

Answer 1

将两个div向左浮动（并清除容器），使它们在桌面上的宽度为50％（或者等于100％）。然后在媒体查询中，保持它们浮动，但只是使它们的宽度为100％

#page3 {
    width:100%;
    clear:both;
    /*All of your other styles */
}
#left3 {
    float:left;
    width:50%;
    /* All of your other styles */
}
#right3 {
    float:left;
    width:50%;
    /* All of your other styles */
}
@media only screen and (max-width: 400px)   {
    #left3, #right3 {
        width:100%;
    }
}

如何将两个水平div叠加在一起用于移动设备？

1 个答案: