个人中心
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
文章推荐： javascript - Node.js 应用程序无需用户即可运行并将数据存储在数据库中
文章推荐： python - 关于python smime 签名验证的问题
文章推荐： javascript - 检测网页是否使用谷歌分析
文章推荐： c++ - Contiki 中的内存溢出
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com