gpt4 book ai didi

html - 如何让两个水平 div 相互堆叠以用于移动设备?

转载 作者:太空宇宙 更新时间:2023-11-04 10:54:45 25 4
gpt4 key购买 nike

我的一个页面上有两个并排的 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;
}
}

最佳答案

将两个 div 向左浮动(并清除容器),使它们在桌面上的宽度为 50%(或任何等于 100% 的宽度)。然后在媒体查询中,让它们保持 float ,但将它们的宽度设置为 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%;
}
}

关于html - 如何让两个水平 div 相互堆叠以用于移动设备?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34726380/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com