我正在创建一个通用的响应式网页,其中三列应该包含在div标签中。不幸的是,这就是页面现在的样子:
如您所见,三列(内容1,内容2和内容3)应包含在红色" 3列布局"部分,像这样:
这第二张图片来自我正在处理的一个类项目,但是当我试图复制并粘贴代码时,一切都变成了sh * t。我将为您提供这两个页面的代码。
这是我的第一张图片的代码(我试图修复的图片):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Resposnive Layouts</title>
<link href="layout1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container"><!--opens container-->
<header>
<h2>Header</h2>
</header>
<nav id="skipTo">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<div class="banner">
</div><!--closes banner-->
<article>
<h2>Article</h2>
</article>
<aside>
<h2>Aside</h2>
</aside>
<div class="clearfix">
</div>
<!-- 3 column layout -->
<div class="content">
<h2>3 Column Layout</h2>
<div class="leftcol"> <h4>Content 1</h4>
</div><!--closes leftcol-->
<div class="rightcol"> <h4>Content 3</h4>
</div><!--closes rightcol-->
<div class="midcol"> <h4>Content 2</h4>
</div><!--closes midcol-->
</div>
<footer>
<h2>Footer</h2>
</footer>
</div><!--closes container-->
</body>
</html>
CSS:
html{overflow:scroll}/*for tablets and phones*/
/*global styles*/
#container {height:10em;
margin:auto;
max-width:1000px;
width:100%}
header {width:100%;
height:25px;
background-color:red;
margin-bottom:15px;}
nav ul{list-style-type: none;
margin: 0;
padding: 0;
text-decoration:none;
text-align:center;
margin-bottom:15px;}
nav ul li{display:inline;
margin-left:15px;}
h2 {text-align:center;}
h4 {display: block;}
article{width:45%;
margin-right:5%;
float:left;
height:500px;
background-color:green;}
aside{width:45%;
float:right;
height:500px;
background-color:green;}
.clearfix{clear:both;}
footer {width:100%;
height:25px;
background-color:red;
margin-bottom:15px;
clear:both;}
.content{width:auto;
height:auto;
clear:both;
background-color:red;}
.leftcol{margin:2% 0 0 1%;
width:30%;
float:left;}
.midcol{width:30%;
margin-left:35%;}
.rightcol{width:30%;
float:right;}
/*media query for phone*/
@media screen and (max-width:480px) {
#skipTo{display:block;}
header nav, #main, aside, article{
float:left;
clear:left;
width:100%;
margin:0 0 1% 1%;}
header nav ul li{margin:0;
background-color:#efefef;
display:block;
margin-bottom:3px;
margin-left:0px;}
header nav a{display:block;
padding:10px 0;
text-align:center;}
.leftcol{margin:0 0 0 0;
width:100%;
clear:left;}
.midcol{margin:0 0 0 0;
width:100%;
clear:both;}
.rightcol{margin:0;
width:100%;
clear:both;}
}/*closes media query*/
以下是第二张图片的代码(正常工作的图片)。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Design</title>
<meta name="viewport" content="width=device-width, minimum scale=1.0,
maximum scale=1.0"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
<script src="index.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<nav id="skipTo">
<ul>
<li><a href="#main" title="skip to main content">
Skip to main content</a>
</li>
</ul>
</nav>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div id="banner">
<img src="images/dogs.jpg" alt="dogs"/>
</div><!--closes banner-->
</header>
<!--2 column layout-->
<section id="main">
<h1>Section</h1>
</section>
<aside>
<h1>Aside</h1>
</aside>
<div class="clearfix">
</div>
<!--3 column layout-->
<div class="content">
<div id="middlecolumnleft">
<h4>Content 1</h4>
</div><!--close middlecolumnleft-->
<div id="middlecolumnright">
<h4>Content 2</h4>
</div><!--close middlecolumnmid-->
<div id="middlecolumnmid">
<h4>Content 3</h4>
</div><!--close middlecolumnright-->
</div><!--close content-->
<div class="clearfix">
</div>
<!--hamburger menu-->
<nav class="desktop">
<a href="#">Desktop 1</a>
<a href="#">Desktop 2</a>
<a href="#">Desktop 3</a>
<a href="#">Desktop 4</a>
</nav>
<nav class="mobile">
<button>Toggle</button>
<div>
<a href="#">Mobile 1</a>
<a href="#">Mobile 2</a>
<a href="#">Mobile 3</a>
<a href="#">Mobile 4</a>
</div>
</nav>
<article>
<h1>Basic Hamburger Menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Porro quasi sint error perspiciatis quis rem nisi reiciendis
doloribus cumque aliquid molestiae quos sed ex commodi ad
eveniet asperiores distinctio vero.
</p>
</article>
<!--end hamburger menu-->
<footer>
<p>©2016</p>
</footer>
</div><!--closes wrapper-->
</body>
</html>
CSS:
html{overflow:scroll}/*for tablets and phones*/
/*global styles*/
body{background-color:#ccc;
font-size:1.1em;
color:#666;
font-family:Arial, sans-serif;
line-height:1.4em;}
h1{margin-bottom:10px;
color:#111;}
a:link{border:none;
color:#000;
font-weight:bold;
text-transform:uppercase;}
p {margin:0 0 10px;
font-size:1.2em;
header,main,footer,nav,section,aside(display:block;)}
/*displays vertically*/
img{width:auto; height:auto; max-width:100%;}
/*Structure for desktop layout*/
#wrapper{width:100%;
max-width:1000px;
margin:auto;
padding:2%;}
/*logo*/
header{width:auto;}
header h1{height:75px;
width:16%;
float:left;
display:block;}
header nav {float:right;
margin-top:40px;}
header nav ul{list-style-type:none;}
header nav ul li{display:inline;
margin-left:15px;}
#skipTo{display:none;}
#skipTo ul{list-style-type:none;}
#skipTo ul li{background-color:#b1ffcc;}
/*main content*/
#main{width:60%;
margin-right:5%;
float:left;
height:500px;
background-color:green;}
aside{width:35%;
float: right;
height: 500px;
background-color:green;}
#banner{float:left;
margin-bottom:15px;
width:100%;}
#banner img{width:100%; width:auto;}
.clearfix{clear:both;}
/*3 column layout*/
.content{height:auto;
width:100%;
padding:20px 0;
clear:both;}
#middlecolumnleft{float:left;
width:30%;
margin-left:1%;
height:200px;
border:thick solid #000;}
#middlecolumnright{float:right;
width:30%;
margin-right:1%;
height:200px;
border:thick solid #000;}
#middlecolumnmid{margin-left:35%;
width:30%;
height:200px;
border:thick solid #000;}
/*footer*/
footer{font-size:0.8em;
padding-left:1%;
height:25px;}
/*media query for phone*/
@media screen and (max-width:480px) {
#skipTo{display:block;}
header nav, #main, aside{
float:left;
clear:left;
width:100%;
margin:0 0 1% 1%;}
header nav ul li{margin:0;
background-color:#efefef;
display:block;
margin-bottom:3px;
margin-left:0px;}
header nav a{display:block;
padding:10px 0;
text-align:center;}
.content{padding-top:5px;
margin:0;
background-color:red;}
#middlecolumnleft{
margin:2% 0 0 1%;
width:100%;
clear:left;}
#middlecolumnright{
margin:2% 0 0 1%;
width:100%;
clear:both;}
#middlecolumnmid{
margin:2% 0 0 1%;
width:100%;
clear:both;}
}/*closes media query*/
/*hamburger menu*/
html {
height: 2000px;}
.mobile {
display: none;
position: fixed;
width: 100%;
top: 0;}
.mobile div {
display: none;}
.mobile button {
position: absolute;
top: 15px;
right: 15px;
border: 0;
text-indent: 200%;
overflow: hidden;
background: rgba(255,255,255,0.8)
url("http://i.imgur.com/vKRaKDX.png") center no-repeat;
border: 1px solid #ddd;
border-radius: 3px;
background-size: 80%;
width: 30px;
height: 30px;
outline: none;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;}
.mobile button.expanded {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-color: transparent;
border: 0;}
.mobile a {
display: block;}
a {
background: #eee;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #ddd;
text-decoration: none;
color: #222;
font-weight: bold;}
a:hover,
a:active,
a:focus {
background: #e7e7e7;}
.desktop {
display: block;
overflow: hidden;}
.desktop a {
width: 25%;
float: left;
border-right: 1px solid #ddd;
box-sizing: border-box;}
.desktop a:last-child {
border-right: none;}
article {
padding: 0 30px 15px;}
@media (max-width: 800px) {
.mobile {
display: block;}
.desktop {
display: none;}
}
/*end hamubrger menu*/
不要担心汉堡菜单 - 我不需要这个项目。如果您认为自己可以快速找到解决方案,那么我感谢您的帮助,但如果没有,请不要花太多时间。我的朋友和我已经花了一整天时间来修复它。谢谢!
编辑:折叠后,页面应如下所示:
相反,它看起来像这样:
答案 0 :(得分:1)
在结束标记之前的<div class="clearfix"></div>
底部添加<div class="content">
。
更正 HTML :
<!--3 column layout-->
<div class="content">
<div id="middlecolumnleft">
<h4>Content 1</h4>
</div><!--close middlecolumnleft-->
<div id="middlecolumnright">
<h4>Content 2</h4>
</div><!--close middlecolumnmid-->
<div id="middlecolumnmid">
<h4>Content 3</h4>
</div><!--close middlecolumnright-->
<div class="clearfix">
</div>
</div><!--close content-->
<强> CSS 强>
.clearfix {
clear: both;
}