页脚在上部对齐 - footer aligns on upper div

footer aligns on upper div

本文关键字：对齐 | 更新日期: 2023-09-27

我一直在研究我网页的主要内容，主要内容CSS类.management_wrapper宽度设置为80%，另一方面，页脚的宽度设置为100%。为什么我的页脚看起来与主要内容的宽度相同？想不通。

.HTML：

<div class="management_wrapper">
   <!-- 1st row-->
   <?php       $result = mysql_query("SELECT * FROM management limit 0,2");
      while($row = mysql_fetch_array($result)){
      $name = $row['name'];
      $nposition = $row['position'];
      $img =$row['img']
      ?>      
   <center>
   <div id="info">
      <h3><?php echo $name; ?></h3>
   </div>
   <div class="list_box">
      <center> 
         <img id="img_size" src="images/main/<?php echo $img; ?>">
      </center>
   </div>
   <?php } ?>
</div>
<div id="footer">
   <span >
      <center>
      Copyright &copy; 2016. All rights reserved. 
   </span>
</div>

.CSS：

.management_wrapper {
    text-align: center;
    width: 80%;
    height: auto;
    background-color: beige;
    padding-left: 1%;
}
#footer {
    height: 20px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 13px;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: auto;
    clear: both;
    position: relative;
}

我已经更正了你的代码，看这个小提琴

问题出在您的 html 标签上，有些标签没有关闭。

.HTML：

<div class="management_wrapper"> 
  <div id="info">
      <h3>name</h3>   
   </div>          
  <div class="list_box">      
    <center> 
      <img id="img_size" src="http://lorempicsum.com/futurama/350/200/1">
    </center>   
  </div>     
</div>
<div id="footer">
   <span >
      <center>
      Copyright &copy; 2016. All rights reserved. </center>
   </span>
</div>

您忘了关闭center标签。

看看这个jsfiddle

因此，带有 PHP（服务器端）代码的代码如下所示：

<div class="management_wrapper">
   <!-- 1st row-->
   <?php       $result = mysql_query("SELECT * FROM management limit 0,2");
      while($row = mysql_fetch_array($result)){
      $name = $row['name'];
      $nposition = $row['position'];
      $img =$row['img']
      ?>      
   <center>
   <div id="info">
      <h3><?php echo $name; ?></h3>
   </div>
   <div class="list_box">
      <center> 
         <img id="img_size" src="images/main/<?php echo $img; ?>">
      </center>
   </div>
   </center>
   <?php } ?>
</div>
<div id="footer">
   <span >
      <center>
        Copyright &copy; 2016. All rights reserved. 
      </center>
   </span>
</div>

这个问题是因为您在没有关闭它的情况下打开了一些标签我修复了它，这是一个js小提琴演示

您在没有关闭它的情况下使用了center标签两次，我只是添加了</center>
所以你的代码变成了

 <div class="management_wrapper">
    <!-- 1st row-->
  <center>    
     <div id="info">
       <h3>John Doe</h3>
     </div>          
   <div class="list_box">      
     <center> 
       <img id="img_size" src="http://placehold.it/200x200">
     </center>   
   </div>      
  </center>
</div>
 <div id="footer">
   <span > <center> Copyright &copy; 2016. All rights reserved.    </center></span>
 </div>

我建议不要使用center标签，因为已弃用，您可以使用text-align:center;