如何消除移动视图的列？

【问题标题】：How to eliminate a column for mobile view?如何消除移动视图的列？
【发布时间】：2021-10-18 14:44:30
【问题描述】：

我是编码新手，正在尝试制作一个响应式网站。在该站点的桌面版本上，我希望将文本放在一列中，将图像放在另一列中。但是对于移动版本，我希望图像位于文本之上。有什么办法可以做到这一点？使用@media 查询会解决这个问题吗？谢谢！

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
}
.header{
        min-height: 100vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
        background-position: center;
        background-size: cover;
        position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav a{      
        color: #fff;
        text-decoration: none;
        font-size: 14px;
}
nav a:hover{
    color:#f44336;
    transition: .4s;
}
.nav-links{
        flex:1;
        text-align: right;
}
.nav-links ul li{
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
}
.nav-links ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 13px;
}
nav ul li a:hover{
    color:#f44336;
    transition: .4s;
}
.text-box{
        width: 90%;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
}
.text-box h1{
    font-size: 54px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

nav .fa{
        display: none;
}

@media(max-width: 700px){
    nav{
        display: flex;
        padding: 4% 8%;
        justify-content: space-between;
        align-items: center;
    }
        .text-box h1{
                font-size: 14px;
        }
        .text-box p{
                font-size: 11px;
        }
        .nav-links ul li {
            display: block;
        }
        .nav-links{
            position: absolute;
            background: #f44336;
            height: 100vh;
            width: 200px;
            top: 0;
            right: -200px;
            text-align: left;
            z-index: 2;
            transition: 1s;
        }
        nav ul li a:hover{
            color:#12161d;
            transition: .4s;
        }
        nav .fa{
            display: block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
        }
        .nav-links ul{
            padding: 30px;
        }
}

/*--footer--*/

.footer{
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.icons .fa{
        color: #808080;
        margin: 0 13px;
        cursor: pointer;
        padding: 18px 0;
    }

/*--about page--*/

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.about-me{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col{
    flex-basis:48%;
    padding: 30px 30px;
}
.about-col img{
    width: 100%;
}

.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
}
.row {
   display:flex;
}

@media(max-width: 700px){
            .about-col h1{
                font-size: 14px;
            }
        .about-col p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.about-col img{
    width: 100%;
}
.sub-header h1{
    margin-top: 80px;
}
}

/*--CV--*/
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}

.timeline ul{
    margin: 0;
    padding:0;
}

.timeline ul li{
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}

.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}

.content{
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 28px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #f44336;
}

.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}

.time{
    color: #808080;
}

    
@media(max-width: 700px){
            .timeline h3{
                font-size: 14px;
            }
            .timeline h4{
                font-size: 14px;
            }
        .timeline p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.sub-header h1{
    margin-top: 80px;
}
}

/*--contact--*/
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}
.contact{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.contact{
text-align: center
}

.center {
    padding-top: 25px;
    padding-bottom: -5px;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
table {
  border-spacing: 10px;
}
td {
        width: 110px;
        text-align: center;
        vertical-align: middle;
}

.hours{
    color: #808080;
    font-size: 14px;
    text-align: center
}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personal Homepage</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
    </head>
    <body>
        <section class="sub-header">
            <nav>
                <a href="index.html">AMANDA YEE</a>
                <div class="nav-links" id="navLinks">
                  <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="">GALLERY</a></li>
                        <li><a href="CV.html">CV</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>
            <h1>ABOUT</h1>
</section>

<!--about content-->
<section class="about-me">

    <div class="row">
        <div class="about-col">
            <h1>This is me.</h1>
            <p>My name is ABC and I am from XYZ.<br></p>
    </div>
    <div class="about-col">
        <img src="images/about.jpg" alt="girl smiling">
    </div>
</div>

</section>



<!--Footer-->

<section class="footer">
    <div class="icons">
    <i class="fa fa-linkedin-square"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-envelope-o"></i>
    </div>
</section>






<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

【问题讨论】：

    标签： html css responsive-design multiple-columns responsive-images


    【解决方案1】：

    在涵盖移动设备的媒体查询中使用flex-direction: column-reverse。

    在你的情况下，我在@media(max-width: 700px)下添加了这个

    检查下面的工作代码。

    *{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
}
.header{
        min-height: 100vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
        background-position: center;
        background-size: cover;
        position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav a{      
        color: #fff;
        text-decoration: none;
        font-size: 14px;
}
nav a:hover{
    color:#f44336;
    transition: .4s;
}
.nav-links{
        flex:1;
        text-align: right;
}
.nav-links ul li{
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
}
.nav-links ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 13px;
}
nav ul li a:hover{
    color:#f44336;
    transition: .4s;
}
.text-box{
        width: 90%;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
}
.text-box h1{
    font-size: 54px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

nav .fa{
        display: none;
}

@media(max-width: 700px){
.row {
    flex-direction: column-reverse;
}
    nav{
        display: flex;
        padding: 4% 8%;
        justify-content: space-between;
        align-items: center;
    }
        .text-box h1{
                font-size: 14px;
        }
        .text-box p{
                font-size: 11px;
        }
        .nav-links ul li {
            display: block;
        }
        .nav-links{
            position: absolute;
            background: #f44336;
            height: 100vh;
            width: 200px;
            top: 0;
            right: -200px;
            text-align: left;
            z-index: 2;
            transition: 1s;
        }
        nav ul li a:hover{
            color:#12161d;
            transition: .4s;
        }
        nav .fa{
            display: block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
        }
        .nav-links ul{
            padding: 30px;
        }
}

/*--footer--*/

.footer{
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.icons .fa{
        color: #808080;
        margin: 0 13px;
        cursor: pointer;
        padding: 18px 0;
    }

/*--about page--*/

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.about-me{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col{
    flex-basis:48%;
    padding: 30px 30px;
}
.about-col img{
    width: 100%;
}

.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
}
.row {
   display:flex;
}

@media(max-width: 700px){
            .about-col h1{
                font-size: 14px;
            }
        .about-col p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.about-col img{
    width: 100%;
}
.sub-header h1{
    margin-top: 80px;
}
}

/*--CV--*/
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}

.timeline ul{
    margin: 0;
    padding:0;
}

.timeline ul li{
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}

.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}

.content{
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 28px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #f44336;
}

.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}

.time{
    color: #808080;
}

    
@media(max-width: 700px){
            .timeline h3{
                font-size: 14px;
            }
            .timeline h4{
                font-size: 14px;
            }
        .timeline p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.sub-header h1{
    margin-top: 80px;
}
}

/*--contact--*/
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}
.contact{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.contact{
text-align: center
}

.center {
    padding-top: 25px;
    padding-bottom: -5px;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
table {
  border-spacing: 10px;
}
td {
        width: 110px;
        text-align: center;
        vertical-align: middle;
}

.hours{
    color: #808080;
    font-size: 14px;
    text-align: center
}
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personal Homepage</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
    </head>
    <body>
        <section class="sub-header">
            <nav>
                <a href="index.html">AMANDA YEE</a>
                <div class="nav-links" id="navLinks">
                  <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="">GALLERY</a></li>
                        <li><a href="CV.html">CV</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>
            <h1>ABOUT</h1>
</section>

<!--about content-->
<section class="about-me">

    <div class="row">
        <div class="about-col">
            <h1>This is me.</h1>
            <p>My name is ABC and I am from XYZ.<br></p>
    </div>
    <div class="about-col">
        <img src="images/about.jpg" alt="girl smiling">
    </div>
</div>

</section>



<!--Footer-->

<section class="footer">
    <div class="icons">
    <i class="fa fa-linkedin-square"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-envelope-o"></i>
    </div>
</section>






<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode