gpt4 book ai didi

html - 如何使用媒体查询更改 html 容器位置

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

我有两个名为 box1 和 box2 的 div 类。

当我将屏幕尺寸更改为 600 像素或更小时,box1 和 box2 的宽度都为:100%,并且 box1 位于顶部,box2 位于底部。有什么办法可以改变这些框的位置,使 box2 保持在顶部,而 box1 保持在底部,无需更改 html 中的元素位置?

    <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>this is the title</title>


<style type="text/css">


.box1{
width:100px;
height:100px;
background:red;
float:left;
}

.box2{
width:100px;
height:100px;
background:blue;
float:right;
}

.wrapper{
max-width:500px;
}




@media screen and (max-width:600px){ /* for tablets */
.box1{
width:100%;
float:right;
}
.box2{
width:100%;
float:right;
}
}


</style>



</head>

<body>

<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>

</div>

<script>


</script>

</body>

</html>

最佳答案

您可以在媒体查询中添加:

.wrapper {
display: flex;
flex-direction: column-reverse;
}

这会将它们放在彼此下方并反转 HTML 代码中给出的顺序。

.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
}

.box2 {
width: 100px;
height: 100px;
background: blue;
float: right;
}

.wrapper {
max-width: 500px;
}

@media screen and (max-width:600px) {
.wrapper {
display: flex;
flex-direction: column-reverse;
}
.box1 {
width: 100%;
float: right;
}
.box2 {
width: 100%;
float: right;
}
}
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>

</div>

关于html - 如何使用媒体查询更改 html 容器位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44766558/

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