以下是我的最终布局：
不幸的是，我无法使用我的css编码正确布局两列。当我使用浮动：左;编码将它们叠加在一起。
/*------ Document -----*/
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header {
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
}
h1 {
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2 {
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav {
color: #423b2e;
}
#current {
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div {
background-image: url(../images/main-content-bg.jpg);
width: 960px;
}
div #banner {
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
}
/*--- Two-Columns Content --*/
#column1of2 {
width: 450px;
padding: 25px;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2 {
width: 260px;
padding: 25px;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer --*/
footer {
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BusinessName</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<h1><a href="index.html">BusinessName</a></h1>
<nav>
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (h2)</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aenean pretium tellus sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How We Can Help (h2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
</section>
</div>
<footer>
<p>© BusinessName. All rights reserved. </p>
</footer>
</body>
</html>
答案 0 :(得分：0)
我认为你犯了一个错误。 float: left;未应用于任何一列。
答案 1 :(得分：0)
在不查看代码的情况下，您是否尝试使用Display：inline？
答案 2 :(得分：0)
我想你想要这个。我没有你的图片。所以我为演示设置了beckground-color。
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header {
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
background-color:red;
}
h1 {
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2 {
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav {
color: #423b2e;
}
#current {
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div {
background-image: url(../images/main-content-bg.jpg);
width: 960px;
background-color:black;
}
div #banner {
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
background-color:green;
}
/*--- Two-Columns Content --*/
#column1of2 {
width: 450px;
padding: 25px;
float:left;
background-color:yellow;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2 {
width: 260px;
padding: 25px;
background-color:blue;
float:left;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer --*/
footer {
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
background-color:green;
clear:both;
}<header>
<h1><a href="index.html">BusinessName</a></h1>
<nav>
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (h2)</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aenean pretium tellus sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How We Can Help (h2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
</section>
</div>
<footer>
<p>© BusinessName. All rights reserved. </p>
</footer>