/ *页脚延伸，并且与顶部不对齐。
使用jquery并在创建幻灯片中使用了本教程
https://www.youtube.com/watch?v=wG62psGPw3o
我对它还很陌生，仍然可以学习，但并不是所有的东西都在学校教授。
这是它的屏幕截图。先感谢您。 http://i.imgur.com/inYOOPq.jpg
<script type="text/javascript" src="J/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="J/JquerySlideshowplugin.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
<style type="text/css">
body {
background-color: black;
margin: 0;
padding: 0;
color: #0C0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
}
#prev {
background-image: url(icons%20and%20logo/slider-arrow-left-white.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
float: left;
height: 100px;
width: 100px;
position: relative;
z-index: 99;
}
#next {
background-image: url(icons%20and%20logo/slider-arrow-right-white.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
float: right;
height: 100px;
width: 100px;
position: relative;
z-index: 99;
}
#slider {
display: block;
float: left;
height: 720px;
width: 960px;
overflow: hidden;
position: absolute;
}
#container {
background-color: #000;
display: block;
float: left;
height: 720px;
width: 960px;
overflow: auto;
}
#wrapper {
display: block;
height: 720px;
width: 960px;
}
.container {
width: 100%;
max-width: 1260px;
min-width: 780px;
background-color: #000;
margin: 0 auto;
}
background-color: #000;
}
.content {
padding: 15px 0;
}
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #000;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="content">
<div class="container">
<div class="header"><a href="#">
<img src="icons and logo/Snakebites.jpg" alt="Insert Logo Here" name="Insert_logo" width="256" height="128" id="Insert_logo" align="middle" style="background-color: #000; display:block;" /></a>
<table style="width:100%">
<td width="1%"><TH width="25%"><a href="Home.html"><img src= "icons and logo/home.png" alt= "Home" width="159"height="56"></h2></a></Th><td width="1%"></td>
<td width="1%"><TH width="25%"><a href="info.html"><img src= "icons and logo/team.png" alt= "Team Information" width="159"height="56"></a></h2></Th><td width="1%"></td>
<td width="1%"><TH width="25%"><a href="achieve.html"><img src= "icons and logo/reputation.png" alt= "Achievements" width="159"height="56"></a></h2></Th><td width="1%"></td>
<td width="1%"><TH width="25%"><a href="Roster.html"><img src= "icons and logo/roster.png" alt= "Home" width="159"height="56"></a></h2></Th><td width="1%"></td>
</tr></table>
<!-- end .header --></div><br />
<h1>text</h1>
<div id="wrapper">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Slide show images/i1.jpg" width="960" height="720"/>
<img src="Slide show images/i2.jpg" width="960" height="720"/>
<img src="Slide show images/i4.jpg" width="960" height="720"/>
<img src="Slide show images/i5.jpg" width="960" height="720"/>
<img src="Slide show images/i6.jpg" width="960" height="720"/>
<img src="Slide show images/i8.jpg" width="960" height="720"/></div>
<div class="controller" id="next"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<table width="100%" border="1">
<caption>text<br />
</caption>
<tr>
<td width="33%"><p>text<br />
<a href="link"><img src= "icons and logo/facebook-icon.png" alt= "FB" width="35"height="35"></a></td>
<td width="34%">text<br />
<a href="link"><img src= "icons and logo/twitter-icon.png" alt= "TWITTER" width="35"height="35"></td>
<td width="33%">text<br />
<a href="link"><img src= "icons and logo/steam-icon.png" alt= "steam" width="35"height="35">
</td>
</tr>
</table><br /><center><font size="1">
All Rights Reserved.<br />
<br />
<a href="link"><img src= "icons and logo/facebook-icon.png" alt= "FB" width="24"height="24"></a>
</font></center>
<br />
</div>
<!-- end .container --></div>
</body>
</html>
最佳答案
每当您忘记定义div的宽度时，就会发生这种情况。
.footer {
width: /*Your width*/ ;
padding: 10px 0;
background-color: #000;
}