html - 由于某种原因，div 位置乱序并继承宽度

Question

所以我正在制作一个基本网页来学习 HTML 和 CSS，这是我为学校做的评估的一部分。

基本上我的问题是这样的:

我有一个页脚 div，它出现在我页面中另一个 div 的上方，并且显示的宽度与该 div 相同。这是我的代码:

<div id="header">
<img src="img/manchester-united-logo.png">
<h1>Manchester United </h1>
</div>

<div id="slider">
<ul class="bxslider">
<li><img src="img/striker.jpg" title="Forwards" /></li>
<li><img src="img/mids.jpg" title="Midfielders" /></li>
<li><img src="img/defenders.jpg" title="Defenders" /></li>       
</ul>
</div>

<div id="windows">
<table id="boxTable">
<tr>
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td>
<td class="spacer"></td>
<td class="box"><img src="img/history.jpg" title="History"></td>
<td class="spacer"></td>
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td>
<td class="spacer"></td>
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td>
</tr>

<tr>
<td class="box"><div class="button"><p><p><a href="URL.htm">The Manager</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p><a href="URL.htm">History</a></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p><a href="URL.htm">Fixtures & Results</a></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p><a href="URL.htm">Old Trafford</a></p></div></td>
</tr>
</div>

<div id="footer">
THE FOOTER WHICH IS ANNOYING!!
</div>

</body>

&CSS

* {
margin: 0;
padding: 0;
}
body{
background-color: #F4F4F4; 
width: 100%;
height: 100%;
min-width: 1280px;

}
#header{
height: 12%;   
width: 1000px;
margin: 0 auto;    
}
.button {  
clear:both;
width: 140px;
height: 18px;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #fff;
border-radius: 3px;
border: 1px solid #999;
padding: 5px;
text-align:center;
margin: 0 auto;
font-family: 'Roboto Slab', serif;
}
.button a {
color: #222222;
text-decoration: none;
}

.button:hover {
opacity: 0.6; 
}

#header img {
height: 110px;
float: left;
}
#header h1{
padding: 25px 0 0 150px;
font-family: 'Roboto Slab', serif;
font-size: 2.5em;
font-weight: 300;
}

#slider{
height: 45%;
clear:both;
background-image:url('img/pattern.png');
padding-top: 30px;
}

#windows{
width: 1000px;
margin: 0 auto;
padding-top: 20px;
overflow:hidden;
}

.box img{
width:220px; 
height:130px;
cursor: pointer;
}

.spacer{
width:50px;
}

#footer{
background-image:url('img/pattern.png');

}

我认为我的问题与我 float 的另一个 div 有关。

Answer 1

您还没有用 </table> 关闭您的 table ;-)

您还缺少一个 </a>在你的链接中

<div id="header">
<img src="img/manchester-united-logo.png">
<h1>Manchester United </h1>
</div>

<div id="slider">
<ul class="bxslider">
<li><img src="img/striker.jpg" title="Forwards" /></li>
<li><img src="img/mids.jpg" title="Midfielders" /></li>
<li><img src="img/defenders.jpg" title="Defenders" /></li>       
</ul>
</div>

<div id="windows">
<table id="boxTable">
<tr>
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td>
<td class="spacer"></td>
<td class="box"><img src="img/history.jpg" title="History"></td>
<td class="spacer"></td>
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td>
<td class="spacer"></td>
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td>
</tr>

<tr>
<td class="box"><div class="button"><p><p><a href="URL.htm">The Manager</a><!-- missing /a here --></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p><a href="URL.htm">History</a></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p><a href="URL.htm">Fixtures & Results</a></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p><a href="URL.htm">Old Trafford</a></p></div></td>
</tr>
</table> <!-- <----------You need to close the table here -->
</div>

<div id="footer">
THE FOOTER WHICH IS ANNOYING!!
</div>

</body>