Question

/ *页脚伸展，并且未与顶部对齐。使用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>

Answer 1

只要您忘记定义div的宽度，就会发生这种情况。

.footer {
    width: /*Your width*/ ;
    padding: 10px 0;
    background-color: #000;
}

每当我放大或缩小时页脚都会拉伸

1 个答案: