Question

我一直在研究我的网页的主要内容，主要内容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;
}

Answer 1

我已更正您的代码see this fiddle

问题在于你的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>

Answer 2

您忘了关闭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>

Answer 3

这个问题是因为你打开了一些标签而没有关闭它我修好了这里是js fiddle demo

您使用了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;代替

页脚在上部div上对齐

3 个答案: