2
我是一種風格的小菜，但我很接近我在這裏摳我的眼睛.. 我不知道爲什麼側邊欄在我的網頁不會與主要內容對齊..我使用浮動並添加了一個clearfix黑客，但似乎沒有任何工作。下面是代碼： 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*/
請幫我在這裏，我做檢查的問題部分，但無法找到一個合適的答案。謝謝。
非常感謝Albear，儘管當我檢查jsfidle時頁腳並不在底部，但是您確實通過側邊欄清理了我的問題。你認爲這個問題是什麼？再次感謝。 –
不要忘記作出接受的答案，並投票給任何幫助你的人..：D – TheAlbear