我是造型的小伙子，但我很接近在这里盯着我的眼睛.. 我无法弄清楚为什么我的页面上的侧边栏不会与主要内容对齐..我使用浮动并添加了一个clearfix hack但似乎没有任何工作。这是代码： HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Brereton C of E A Primary School</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class= "container">
<header>
<div id="logo">
<a href="index.html">
<img src="img/logo.png" alt = "Brereton C of E A Primary School">
</a>
</div>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="governors.html">Governors</a>
</li>
<li>
<a href="pta.html">PTA</a>
</li>
<li>
<a href="contact.html">Conact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main" class="cf">
<h2>Welcome to Brereton C of E (A) Primary School</h2>
<h3>
When you first visit Brereton School, you sense very quickly that it is a vibrant, happy, multi-cultural school with respect, tolerance and celebration at its core.
</h3>
<p>
Then, when you look at the school’s results, you will see that the friendly, caring atmosphere is accompanied by an ethos of supporting pupils to achieve their full potential and raise standards.
</p>
</div>
<div id="downloads" class="cf">
<div class="box" id="prospectus">
<a href="#">
<img src="img/prospectus.png">
</a>
</div>
<div class="box" id="newsletters">
<a href="#">
<img src="img/newsletters.png">
</a>
</div>
</div>
<aside class="cf">
<ul class="sidebar">
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="">Staff</a>
</li>
<li>
<a href="">Learning Platform</a>
</li>
<li>
<a href="">NCSL</a>
</li>
<li>
<a href="">Ofsted Report</a>
</li>
<li>
<a href="">Teachernet</a>
</li>
</ul>
<form role="search" method="get" id="searchform" action="./Brereton C of E A Primary School_files/Brereton C of E A Primary School.htm">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</aside>
<footer>
<h1 class="bottom_logo">
<a href="index.html">Brereton C of E A Primary School</a>
</h1>
</footer>
</div>
</body>
</html>
和CSS：
/* =====START HACK=====*/
*{
padding:0;
margin:0;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* =====END HACK=====*/
/* =====GENERAL STYLING=====*/
body{
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #efe9bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#efe9bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#efe9bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#efe9bf',GradientType=0 ); /* IE6-9 */
width:960px;
margin:auto;
}
h2{
font-family: 'Museo500',"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#553A2A;
}
h3,a,p{
font-family: arial;
}
h3{
font-size: 15px;
}
p{
font-size: 12px;
}
a{
font-size: 12px;
}
/* =====END GENERAL STYLING=====*/
/* HEADER*/
#logo {
width:113px;
margin:auto;
padding-top: 50px;
padding-bottom: 30px;
}
nav{
background:black;
color:white;
height: 30px;
padding-top: 7px;
margin-bottom: 20px;
}
nav a{
color:white;
text-decoration: none;
}
nav a:hover{
color:#e7e7e7;
}
#logo
nav ul{
list-style: none;
}
nav li{
display: inline;
padding-left: 20px;
}
/* END HEADER*/
/* MAIN*/
#main{
width: 60%;
min-width: 400px;
float: left;
padding:10px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #B8B079;
margin-left: 15px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 40px;
}
#main h2{
padding-bottom: 5px;
}
#main h3{
color:#3A3A3A;
padding-bottom: 10px;
}
#main p{
color:#3A3A3A;
padding-bottom: 50px;
}
#downloads{
width: 50%;
margin-left: 12px;
float: left;
}
#prospectus{
float: left;
padding-right: 10px;
}
#newsletters{
float: left;
}
/* END MAIN*/
/* ASIDE*/
aside{
float:left;
width: 30%;
}
aside ul{
list-style: none;
}
/* END ASIDE*/
请在这里帮助我，我确实检查了问题部分，但无法找到合适的答案。感谢。
答案 0 :(得分：0)
我假设你想要页面右侧的侧边栏。
尝试“浮动：正确;”在<aside class="cf">，它应该做你想要的 - 这会将侧边栏浮动到页面的右侧。
现在，<aside>向左浮动，在<div id="downloads">之后（它本身向左浮动）。左侧浮动本质上意味着：“将我拉出文档流程，将我附加到我父容器的左侧，并在我绕右侧流动后在页面上生成所有元素”。
这导致<aside>在浮动的左<div id="downloads">周围“流动”并与之对齐 - 在这种情况下，笨拙地粘在它的右侧。
答案 1 :(得分：0)
您好我已修复了侧栏问题，请查看http://jsfiddle.net/Jz4eL/上的代码。我所做的只是为您的主要内容添加HTML部分包装，并在css中将其大小设置为10％。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Brereton C of E A Primary School</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class= "container">
<header>
<div id="logo">
<a href="index.html">
<img src="img/logo.png" alt = "Brereton C of E A Primary School">
</a>
</div>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="governors.html">Governors</a>
</li>
<li>
<a href="pta.html">PTA</a>
</li>
<li>
<a href="contact.html">Conact Us</a>
</li>
</ul>
</nav>
</header>
<section>
<div id="main" class="cf">
<h2>Welcome to Brereton C of E (A) Primary School</h2>
<h3>
When you first visit Brereton School, you sense very quickly that it is a vibrant, happy, multi-cultural school with respect, tolerance and celebration at its core.
</h3>
<p>
Then, when you look at the school’s results, you will see that the friendly, caring atmosphere is accompanied by an ethos of supporting pupils to achieve their full potential and raise standards.
</p>
</div>
<div id="downloads" class="cf">
<div class="box" id="prospectus">
<a href="#">
<img src="img/prospectus.png">
</a>
</div>
<div class="box" id="newsletters">
<a href="#">
<img src="img/newsletters.png">
</a>
</div>
</div>
</section>
<aside class="cf">
<ul class="sidebar">
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="">Staff</a>
</li>
<li>
<a href="">Learning Platform</a>
</li>
<li>
<a href="">NCSL</a>
</li>
<li>
<a href="">Ofsted Report</a>
</li>
<li>
<a href="">Teachernet</a>
</li>
</ul>
<form role="search" method="get" id="searchform" action="./Brereton C of E A Primary School_files/Brereton C of E A Primary School.htm">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</aside>
<footer>
<h1 class="bottom_logo">
<a href="index.html">Brereton C of E A Primary School</a>
</h1>
</footer>
</div>
</body>
</html>
CSS更改
/* MAIN*/
container {width:100%;}
footer {clear:both;}
section{
width: 60%;
min-width: 400px;
float: left;
padding:10px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #B8B079;
margin-left: 15px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 40px;
}
我还修复了页脚，所以它现在位于页面的底部。