无法在响应式设计中将两个 div 放在单行中
Not able to place two divs in single row in responsive design
我有一个专为移动和网络设计的网页。我在该页面中有一个页脚，该页脚由 4 列组成（每列有 25% 的宽度）。当触发移动模式时，我已经将每列的宽度设为 50%，以便页脚分为两行（每行有两列）。为实现这一点，我为列指定了两个 class 名称。在 CSS 媒体下的 classes 之一中，我指定它在移动视图中仅占用 50% 的宽度。但是，即使 CSS 为 kin 移动视图的每一列都得到反映，它仍然占据 100% 的宽度并产生 4 行，每一行都有一列。我附上了截图和代码。谁能指出我哪里错了？
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
label
{
font-size: 35px;
font-weight: 600
}
p
{
font-size:28px;
line-height: 1.2;
}
article p
{
font-size:35px;
padding:20px;
}
/********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;
}
button
{
font-size:32px;
font-weight: 700;
color:#fff;
background-color:#0069ff;
padding: 15px 60px;
display:block;
text-align: center;
margin:5px;
border-radius: 7px;
}
button.learnMore
{
display:block;
margin:auto;
}
.container
{
width : 100%;
margin: 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);
}
div.box
{
margin:24px;
text-align:center;
background-color: #fff;
padding: 36px 24px 36px 24px;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),
0 2px 3px 0 rgba(0,0,0,.1);
}
div.slopeIcon img
{
display:block;
margin:auto;
box-shadow: -2px -2px 5px 2px rgba(0,0,0,.15),
2px 2px 4px 2px rgba(0,0,0,.15);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
h1.section2header
{
font-size:65px;
text-align:center;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="password"], /* added by shamil*/
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
border-radius: 7px
}
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%;}
*{
box-sizing: border-box
}
footer.footsy
{
background-color: #666;
padding:2%
}
footer.footsy h1
{
color:#fff;
font-size: 35px;
}
footer.footsy ul
{
list-style: none;
text-align:left;
padding-left: 0;
}
footer.footsy ul li
{
color:#fff;
font-size:22px;
line-height: 1.5;
}
/********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;
}
h1.section2header
{
font-size:55px;
}
.row {
flex-direction: column;
}
article p
{
font-size: 25px;
}
.col-4,
.col-5,
.col-6,
.col-7
{
width:100%;
margin:0;
}
div.mobilestack
{
width:50%;
display:block;
margin:0;
}
div.box
{
padding:5px;
display:block;
}
div.slopeIcon
{
margin:10px;
}
div.slopeIcon img
{
width:100%;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
input[type="password"],
input[type="text"]
{
width:200px;
float:left;
padding:5px;
}
.videoContainer iframe
{
width:400px;
float:left;
padding:5px; ;
}
}
<! 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()">☰</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">
<div class="videoContainer">
<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>
</div>
<header>
<h1 class = "section2header"> Top Anime Counties </h1>
</header>
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime and Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class ="row">
<div class ="col-12">
<button class="learnMore">Learn More</button>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-7">
<article>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</article>
</div>
<div class= "col-5">
<div class="slopeIcon">
<img src="iOS_Slope.png">
</div>
</div>
</div>
</div>
<footer class="footsy">
<div class="row">
<div class="col-3 mobilestack">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Organization</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Industry</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Maanagement</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
</div>
</footer>
<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>
只需添加 .footsy .row{display:block;} 和
div.mobilestack{宽度:45%; display:inline-区块；保证金：0；}
用于禁用弹性方向列
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
label
{
font-size: 35px;
font-weight: 600
}
p
{
font-size:28px;
line-height: 1.2;
}
article p
{
font-size:35px;
padding:20px;
}
/********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;
}
button
{
font-size:32px;
font-weight: 700;
color:#fff;
background-color:#0069ff;
padding: 15px 60px;
display:block;
text-align: center;
margin:5px;
border-radius: 7px;
}
button.learnMore
{
display:block;
margin:auto;
}
.container
{
width : 100%;
margin: 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);
}
div.box
{
margin:24px;
text-align:center;
background-color: #fff;
padding: 36px 24px 36px 24px;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),
0 2px 3px 0 rgba(0,0,0,.1);
}
div.slopeIcon img
{
display:block;
margin:auto;
box-shadow: -2px -2px 5px 2px rgba(0,0,0,.15),
2px 2px 4px 2px rgba(0,0,0,.15);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
h1.section2header
{
font-size:65px;
text-align:center;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="password"], /* added by shamil*/
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
border-radius: 7px
}
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%;}
*{
box-sizing: border-box
}
footer.footsy
{
background-color: #666;
padding:2%
}
footer.footsy h1
{
color:#fff;
font-size: 35px;
}
footer.footsy ul
{
list-style: none;
text-align:left;
padding-left: 0;
}
footer.footsy ul li
{
color:#fff;
font-size:22px;
line-height: 1.5;
}
/********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;
}
h1.section2header
{
font-size:55px;
}
.row {
flex-direction: column;
}
.footsy .row{
display:block;
}
article p
{
font-size: 25px;
}
.col-4,
.col-5,
.col-6,
.col-7
{
width:100%;
margin:0;
}
div.mobilestack
{
width:45%;
display:inline-block;
margin:0;
}
div.box
{
padding:5px;
display:block;
}
div.slopeIcon
{
margin:10px;
}
div.slopeIcon img
{
width:100%;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
input[type="password"],
input[type="text"]
{
width:200px;
float:left;
padding:5px;
}
.videoContainer iframe
{
width:400px;
float:left;
padding:5px; ;
}
}
<! 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()">☰</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">
<div class="videoContainer">
<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>
</div>
<header>
<h1 class = "section2header"> Top Anime Counties </h1>
</header>
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime and Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class ="row">
<div class ="col-12">
<button class="learnMore">Learn More</button>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-7">
<article>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</article>
</div>
<div class= "col-5">
<div class="slopeIcon">
<img src="iOS_Slope.png">
</div>
</div>
</div>
</div>
<footer class="footsy">
<div class="row">
<div class="col-3 mobilestack">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Organization</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Industry</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Maanagement</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
</div>
</footer>
<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>
您页脚中的 .row 元素有 flex-direction: column;，这就是您遇到问题的原因 - 这样一来，它的子项将始终垂直堆叠，无论其宽度如何。
要更改它，请在您的移动媒体查询中添加以下 CSS 规则：
.footsy .row {
flex-direction: row;
flex-wrap: wrap;
}
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
label
{
font-size: 35px;
font-weight: 600
}
p
{
font-size:28px;
line-height: 1.2;
}
article p
{
font-size:35px;
padding:20px;
}
/********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;
}
button
{
font-size:32px;
font-weight: 700;
color:#fff;
background-color:#0069ff;
padding: 15px 60px;
display:block;
text-align: center;
margin:5px;
border-radius: 7px;
}
button.learnMore
{
display:block;
margin:auto;
}
.container
{
width : 100%;
margin: 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);
}
div.box
{
margin:24px;
text-align:center;
background-color: #fff;
padding: 36px 24px 36px 24px;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),
0 2px 3px 0 rgba(0,0,0,.1);
}
div.slopeIcon img
{
display:block;
margin:auto;
box-shadow: -2px -2px 5px 2px rgba(0,0,0,.15),
2px 2px 4px 2px rgba(0,0,0,.15);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
h1.section2header
{
font-size:65px;
text-align:center;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="password"], /* added by shamil*/
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
border-radius: 7px
}
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%;}
*{
box-sizing: border-box
}
footer.footsy
{
background-color: #666;
padding:2%
}
footer.footsy h1
{
color:#fff;
font-size: 35px;
}
footer.footsy ul
{
list-style: none;
text-align:left;
padding-left: 0;
}
footer.footsy ul li
{
color:#fff;
font-size:22px;
line-height: 1.5;
}
/********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;
}
h1.section2header
{
font-size:55px;
}
.row {
flex-direction: column;
}
article p
{
font-size: 25px;
}
.col-4,
.col-5,
.col-6,
.col-7
{
width:100%;
margin:0;
}
div.mobilestack
{
width:50%;
display: block;
margin:0;
}
div.box
{
padding:5px;
display:block;
}
div.slopeIcon
{
margin:10px;
}
div.slopeIcon img
{
width:100%;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
input[type="password"],
input[type="text"]
{
width:200px;
float:left;
padding:5px;
}
.videoContainer iframe
{
width:400px;
float:left;
padding:5px; ;
}
.footsy .row {
flex-direction: row;
flex-wrap: wrap;
}
}
<! 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()">☰</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">
<div class="videoContainer">
<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>
</div>
<header>
<h1 class = "section2header"> Top Anime Counties </h1>
</header>
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime and Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class ="row">
<div class ="col-12">
<button class="learnMore">Learn More</button>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-7">
<article>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</article>
</div>
<div class= "col-5">
<div class="slopeIcon">
<img src="iOS_Slope.png">
</div>
</div>
</div>
</div>
<footer class="footsy">
<div class="row">
<div class="col-3 mobilestack">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Organization</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Industry</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Maanagement</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
</div>
</footer>
<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>
而不是定义宽度或其他东西来为您的项目创建网格系统，您可以轻松地使用 css 拥有的正式网格系统，例如 flexbox 或 css 网格。
为此，我将向您展示如何使用 css 网格：
.area{
display: flex;
flex-flow: column;
}
.footer{ display: grid; }
@media(min-width: 600px){
.footer{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media(max-width: 599px){
.footer{
grid-template-columns: 1fr 1fr;
}
}
<div class="footer">
<div class="area">
<h3> header 1 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div class="area">
<h3> header 2 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div class="area">
<h3> header 3 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div class="area">
<h3> header 4 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
我有一个专为移动和网络设计的网页。我在该页面中有一个页脚，该页脚由 4 列组成（每列有 25% 的宽度）。当触发移动模式时，我已经将每列的宽度设为 50%，以便页脚分为两行（每行有两列）。为实现这一点，我为列指定了两个 class 名称。在 CSS 媒体下的 classes 之一中，我指定它在移动视图中仅占用 50% 的宽度。但是，即使 CSS 为 kin 移动视图的每一列都得到反映，它仍然占据 100% 的宽度并产生 4 行，每一行都有一列。我附上了截图和代码。谁能指出我哪里错了？
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
label
{
font-size: 35px;
font-weight: 600
}
p
{
font-size:28px;
line-height: 1.2;
}
article p
{
font-size:35px;
padding:20px;
}
/********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;
}
button
{
font-size:32px;
font-weight: 700;
color:#fff;
background-color:#0069ff;
padding: 15px 60px;
display:block;
text-align: center;
margin:5px;
border-radius: 7px;
}
button.learnMore
{
display:block;
margin:auto;
}
.container
{
width : 100%;
margin: 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);
}
div.box
{
margin:24px;
text-align:center;
background-color: #fff;
padding: 36px 24px 36px 24px;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),
0 2px 3px 0 rgba(0,0,0,.1);
}
div.slopeIcon img
{
display:block;
margin:auto;
box-shadow: -2px -2px 5px 2px rgba(0,0,0,.15),
2px 2px 4px 2px rgba(0,0,0,.15);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
h1.section2header
{
font-size:65px;
text-align:center;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="password"], /* added by shamil*/
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
border-radius: 7px
}
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%;}
*{
box-sizing: border-box
}
footer.footsy
{
background-color: #666;
padding:2%
}
footer.footsy h1
{
color:#fff;
font-size: 35px;
}
footer.footsy ul
{
list-style: none;
text-align:left;
padding-left: 0;
}
footer.footsy ul li
{
color:#fff;
font-size:22px;
line-height: 1.5;
}
/********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;
}
h1.section2header
{
font-size:55px;
}
.row {
flex-direction: column;
}
article p
{
font-size: 25px;
}
.col-4,
.col-5,
.col-6,
.col-7
{
width:100%;
margin:0;
}
div.mobilestack
{
width:50%;
display:block;
margin:0;
}
div.box
{
padding:5px;
display:block;
}
div.slopeIcon
{
margin:10px;
}
div.slopeIcon img
{
width:100%;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
input[type="password"],
input[type="text"]
{
width:200px;
float:left;
padding:5px;
}
.videoContainer iframe
{
width:400px;
float:left;
padding:5px; ;
}
}
<! 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()">☰</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">
<div class="videoContainer">
<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>
</div>
<header>
<h1 class = "section2header"> Top Anime Counties </h1>
</header>
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime and Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class ="row">
<div class ="col-12">
<button class="learnMore">Learn More</button>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-7">
<article>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</article>
</div>
<div class= "col-5">
<div class="slopeIcon">
<img src="iOS_Slope.png">
</div>
</div>
</div>
</div>
<footer class="footsy">
<div class="row">
<div class="col-3 mobilestack">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Organization</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Industry</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Maanagement</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
</div>
</footer>
<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>
只需添加 .footsy .row{display:block;} 和 div.mobilestack{宽度:45%; display:inline-区块；保证金：0；} 用于禁用弹性方向列
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
label
{
font-size: 35px;
font-weight: 600
}
p
{
font-size:28px;
line-height: 1.2;
}
article p
{
font-size:35px;
padding:20px;
}
/********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;
}
button
{
font-size:32px;
font-weight: 700;
color:#fff;
background-color:#0069ff;
padding: 15px 60px;
display:block;
text-align: center;
margin:5px;
border-radius: 7px;
}
button.learnMore
{
display:block;
margin:auto;
}
.container
{
width : 100%;
margin: 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);
}
div.box
{
margin:24px;
text-align:center;
background-color: #fff;
padding: 36px 24px 36px 24px;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),
0 2px 3px 0 rgba(0,0,0,.1);
}
div.slopeIcon img
{
display:block;
margin:auto;
box-shadow: -2px -2px 5px 2px rgba(0,0,0,.15),
2px 2px 4px 2px rgba(0,0,0,.15);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
h1.section2header
{
font-size:65px;
text-align:center;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="password"], /* added by shamil*/
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
border-radius: 7px
}
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%;}
*{
box-sizing: border-box
}
footer.footsy
{
background-color: #666;
padding:2%
}
footer.footsy h1
{
color:#fff;
font-size: 35px;
}
footer.footsy ul
{
list-style: none;
text-align:left;
padding-left: 0;
}
footer.footsy ul li
{
color:#fff;
font-size:22px;
line-height: 1.5;
}
/********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;
}
h1.section2header
{
font-size:55px;
}
.row {
flex-direction: column;
}
.footsy .row{
display:block;
}
article p
{
font-size: 25px;
}
.col-4,
.col-5,
.col-6,
.col-7
{
width:100%;
margin:0;
}
div.mobilestack
{
width:45%;
display:inline-block;
margin:0;
}
div.box
{
padding:5px;
display:block;
}
div.slopeIcon
{
margin:10px;
}
div.slopeIcon img
{
width:100%;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
input[type="password"],
input[type="text"]
{
width:200px;
float:left;
padding:5px;
}
.videoContainer iframe
{
width:400px;
float:left;
padding:5px; ;
}
}
<! 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()">☰</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">
<div class="videoContainer">
<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>
</div>
<header>
<h1 class = "section2header"> Top Anime Counties </h1>
</header>
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime and Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class ="row">
<div class ="col-12">
<button class="learnMore">Learn More</button>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-7">
<article>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</article>
</div>
<div class= "col-5">
<div class="slopeIcon">
<img src="iOS_Slope.png">
</div>
</div>
</div>
</div>
<footer class="footsy">
<div class="row">
<div class="col-3 mobilestack">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Organization</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Industry</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Maanagement</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
</div>
</footer>
<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>
您页脚中的 .row 元素有 flex-direction: column;，这就是您遇到问题的原因 - 这样一来，它的子项将始终垂直堆叠，无论其宽度如何。
要更改它，请在您的移动媒体查询中添加以下 CSS 规则：
.footsy .row {
flex-direction: row;
flex-wrap: wrap;
}
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
label
{
font-size: 35px;
font-weight: 600
}
p
{
font-size:28px;
line-height: 1.2;
}
article p
{
font-size:35px;
padding:20px;
}
/********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;
}
button
{
font-size:32px;
font-weight: 700;
color:#fff;
background-color:#0069ff;
padding: 15px 60px;
display:block;
text-align: center;
margin:5px;
border-radius: 7px;
}
button.learnMore
{
display:block;
margin:auto;
}
.container
{
width : 100%;
margin: 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);
}
div.box
{
margin:24px;
text-align:center;
background-color: #fff;
padding: 36px 24px 36px 24px;
border-radius: 7px;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),
0 2px 3px 0 rgba(0,0,0,.1);
}
div.slopeIcon img
{
display:block;
margin:auto;
box-shadow: -2px -2px 5px 2px rgba(0,0,0,.15),
2px 2px 4px 2px rgba(0,0,0,.15);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
h1.section2header
{
font-size:65px;
text-align:center;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="password"], /* added by shamil*/
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
border-radius: 7px
}
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%;}
*{
box-sizing: border-box
}
footer.footsy
{
background-color: #666;
padding:2%
}
footer.footsy h1
{
color:#fff;
font-size: 35px;
}
footer.footsy ul
{
list-style: none;
text-align:left;
padding-left: 0;
}
footer.footsy ul li
{
color:#fff;
font-size:22px;
line-height: 1.5;
}
/********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;
}
h1.section2header
{
font-size:55px;
}
.row {
flex-direction: column;
}
article p
{
font-size: 25px;
}
.col-4,
.col-5,
.col-6,
.col-7
{
width:100%;
margin:0;
}
div.mobilestack
{
width:50%;
display: block;
margin:0;
}
div.box
{
padding:5px;
display:block;
}
div.slopeIcon
{
margin:10px;
}
div.slopeIcon img
{
width:100%;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
input[type="password"],
input[type="text"]
{
width:200px;
float:left;
padding:5px;
}
.videoContainer iframe
{
width:400px;
float:left;
padding:5px; ;
}
.footsy .row {
flex-direction: row;
flex-wrap: wrap;
}
}
<! 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()">☰</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">
<div class="videoContainer">
<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>
</div>
<header>
<h1 class = "section2header"> Top Anime Counties </h1>
</header>
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<img src="devIcon.png">
</div>
<label>Anime and Manga</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class ="row">
<div class ="col-12">
<button class="learnMore">Learn More</button>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-7">
<article>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</article>
</div>
<div class= "col-5">
<div class="slopeIcon">
<img src="iOS_Slope.png">
</div>
</div>
</div>
</div>
<footer class="footsy">
<div class="row">
<div class="col-3 mobilestack">
<h1>Company</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Organization</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Industry</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
<div class="col-3 mobilestack">
<h1>Maanagement</h1>
<ul>
<li>About</li>
<li>Blogs</li>
<li>Careers</li>
</ul>
</div>
</div>
</footer>
<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>
而不是定义宽度或其他东西来为您的项目创建网格系统，您可以轻松地使用 css 拥有的正式网格系统，例如 flexbox 或 css 网格。 为此，我将向您展示如何使用 css 网格：
.area{
display: flex;
flex-flow: column;
}
.footer{ display: grid; }
@media(min-width: 600px){
.footer{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media(max-width: 599px){
.footer{
grid-template-columns: 1fr 1fr;
}
}
<div class="footer">
<div class="area">
<h3> header 1 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div class="area">
<h3> header 2 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div class="area">
<h3> header 3 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div class="area">
<h3> header 4 </h3>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>