CSS 移动视图中的多列布局重叠

Question

我使用了 12 列格式。（参考网络视图图像）有两个 div 标记为黄色和红色，每个宽度为 50%。

我的编码方式是，当设备宽度减小时，每个 div 的宽度将设置为 100%，以便每个 div 部分中的内容当从移动设备或任何宽度较小的设备上查看时，它们被放置在另一个下方。但如移动视图（1 和 2）的屏幕截图所示，情况并非如此。第二个 div 已经移出屏幕。

我没用过bootstrap。我的HTML和CSS代码如下

/********DEFAULTS*******/
nav,header,footer
{
    display:block;
}

body
{
    line-height: 1;
    margin :0;
}

/********NAV BAR*******/
nav
{
    width:100%;
    margin:0;
}

nav ul
{
    background-color: #eee;
    overflow: hidden;
    margin:0;
    padding:0;
}

ul.topnav li
{
    list-style: none;
    float : left;
    margin:0;
    padding:0;
}

ul.topnav li.topnav-right
{
    float : right;
}

ul.topnav li a
{
    display : block;
    text-decoration : none;
    min-height:16px;
    text-align:centre;
    padding:14px;
    text-transform: uppercase;
    color:#665;
}

ul.topnav li a:hover
{
    background-color: #0000ff;
    color:#fff;
}

ul.topnav li.dropdownicon
{
    display: none;
}

.container 
{
    width : 100%;
    margins: auto;
    padding-top: 4%;
    padding-bottom: 4%;   
    background: 
}
/********custom style*******/
#section-1-gradient
{
    background:#076DFF;
    background-image: -webkit-linear-gradient(#076DFF, #65A5FF);
    background-image: -o-linear-gradient(#076DFF, #65A5FF);
    background-image: -moz-linear-gradient(#076DFF, #65A5FF);
    background-image: linear-gradient(#076DFF, #65A5FF);
}

h1.large
{
    color:#fff;
    font-size: 56px;
    margin:0;
    line-height: 70px;
}

div.leftside-col
{
    margin-left:30%;
    
}

div.rightside-col
{
    margin-left:15%;    
}

input[type="text"]
{
    font-size: 20px;
    width:400px;
    min-width: 100px;
    padding:5px;
}

input[type="password"] /* added by shamil*/
{
    font-size: 20px;
    width:400px;
    min-width: 100px;
    padding:5px;
}

form h2
{
    color:white;
}
.row
{
    width:100%;
    display:flex;
    flex:wrap;
    align-items:center;    
}

.row::after
{
    display:table;
    clear: both;
    content:"";
}

.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}



/********MOBILE*******/
@media screen and (max-width : 680px)
{
    ul.topnav li:not(:nth-child(1))
    {
        display: none;
    }
    ul.topnav li.dropdownicon
    {
        display:block;
        float: right;
    }
    ul.topnav.responsive li.dropdownicon{
        position: absolute;
        top:0;
        right:0;
    }
    ul.topnav.responsive{
        position: relative;
    }
    ul.topnav.responsive li{
        display:inline;
        float : none;
    }
    ul.topnav.responsive li a
    {
        display: block;
        text-align: left;
        text-transform: uppercase;
    }
    
    .col-6
    {
        width:100%;
        margin:0;            
    }
    
    div.rightside-col,
    div.leftside-col
    {
        width:15%;
    }
   
}

<! DOCTYPE html>
<html>    
    <head>
        <title>
        Anime Shop 
        </title>
        <link rel="stylesheet" href="style.css">              

    </head>
    
    <body>
        <nav>
            <ul class="topnav" id="dropdownClick">
                <li><a href="#Home">Home</a></li>
                <li><a href="#News">News</a></li>
                <li><a href="#Contact">Contact</a></li>
                <li><a href="#About">About</a></li>
                <li class="topnav-right"><a href="#Signup">Sign up</a></li>
                <li class="topnav-right"><a href="#Signin">Sign in</a></li>
                <li class="dropdownicon"><a href="javascript:void(0);" onclick = "dropdownMenu()">&#9776</a></li>
            </ul>
        </nav>
        
        <div class="container" id="section-1-gradient">
            <div class="row">
                <div class= "col-6">
                    <div class= "leftside-col">
                        <h1 class="large">
                        Crazy radness
                        </h1>
                        <h1 class="large">
                        Made for Otaku
                        </h1>
                        <form>
                            <div class= "leftside-col">
                                <h2>Username</h2>
                                <input class="inputbox" type="text" name="Username "placeholder="Username">
                                <h2>Password</h2>
                                <input class="inputbox" type="password" name="Password "placeholder="Password">
                            </div>
                        </form>
                    </div>
                </div>
                <div class= "col-6">
                    <div class= "rightside-col">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/uC_SgMzlr6U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>            
        </div>          
        <script>
            function dropdownMenu()           
            {
               var x= document.getElementById("dropdownClick");
                if(x.className === "topnav")
                {
                    x.className = "topnav responsive";
                    /*change topnav to topnav.responsive*/
                }
                else
                {
                    x.className = "topnav";
                }
            }
        </script>
    </body>
</html>

有人可以指出我哪里错了吗？

Answer 1

您可以将以下代码添加到您的媒体查询中

.row {
    flex-direction: column;
}

然后修正你的边距和填充

Answer 2

我发现它占据了 50% 的尺寸，即使它的尺寸较小，并且会有最小宽度，所以它会向左溢出，尝试使其具有反应性

CSS 移动视图中的多列布局重叠

CSS multicolumn layout overlaps in mobile view

html

css

responsive-design

css-multicolumn-layout