• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

的CSS粘的页脚导致图像不适合在DIV

html 来源:twario 24次浏览
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css">  
     body{ 
      background-color: #f2f2f2; 
     } 

     #content{ 
      background-color: white; 
      border: 1px solid gray; 
      width: 60%; 
      height: auto; 
      display: block; 
      position: relative; 
      left: 50%; 
      margin-left: -30%; 
      padding: 10px; 
      z-index: 100; 
      margin-top: 20px; 
     } 
     html, body { 
      height: auto; 
     } 

     #wrap { 
      min-height: 100%; 
     } 

     #main { 
      overflow:auto; 
      padding-bottom: 150px; 
     } /* must be same height as the footer */ 

     #footer { 
      position: relative; 
      margin-top: -150px; /* negative value of footer height */ 
      height: 150px; 
      clear:both; 
     } 
     .instructions{ 
      margin-top: 50px; 
      font-family: serif; 
      font-size: medium; 
      width: 50%; 
      left: 50%; 
      margin-left: -25%; 
      position: relative; 
      margin-bottom: 60px; 
     } 
     .repbanner{ 
      background-color: red; 
      width: 108%; 
      height: auto; 
      left: 50%; 
      margin-left: -54.5%;     
      margin-top: 40px; 
      position: relative; 
      z-index: 200; 
      border: 1px #a70000 solid; 
      text-align: center; 
      color: white; 
      font-size: smaller; 
      text-transform: uppercase; 
      padding-top: 3px; 
      padding-bottom: 3px; 
     } 

     .dembanner{ 
      background-color: blue; 
      width: 108%; 
      height: auto; 
      left: 50%; 
      margin-left: -54.5%; 
      margin-top: 40px; 
      position: relative; 
      z-index: 200; 
      border: 1px navy solid; 
      text-align: center; 
      color: white; 
      font-size: smaller; 
      text-transform: uppercase; 
      padding-top: 3px; 
      padding-bottom: 3px; 

     } 
     .introbanner{ 
      background-color: white; 
      width: 108%; 
      height: auto; 
      left: 50%; 
      margin-left: -54.5%; 
      margin-top: 40px; 
      position: relative; 
      z-index: 199; 
      border: 1px gray solid; 
      text-align: center; 
      color: black; 
      font-size: smaller; 
      text-transform: uppercase; 
      margin-bottom: 10px; 

     } 

     /*Opera Fix*/ 
     body:before { 
      content:""; 
      height:100%; 
      float:left; 
      width:0; 
      margin-top:-32767px;/ 
     } 
     #animals{ 
      width: 100%; 
      margin-left: 5px; 
      margin-right: 5px; 
      margin-bottom: 5px; 
      text-align: center; 
      position: relative; 
      display: block; 
      height: auto; 
     } 
     .animalmugshot{ 
      width: 150px; 
      height: 150px; 
      float: left; 
      position: relative; 
     } 
     img{ 
      position: relative 
     } 
    </style> 
    <!--[if !IE 7]> 
     <style type="text/css"> 
     #wrap {display:table;height:100%} 
     </style> 
    <![endif]--> 

    </head> 
<body> 
<div id="wrap"> 
    <div id="main"> 
     <div id="content"> 
     <div class="repbanner"> 
      INTRODUCTION 
     </div> 
     <div class="instructions"> 
     Hello and thanks for using the Chrome extension Political Animals. Below are the instructions on how the piece works. Enjoy! 
     <br/> 
     <br/> 
     </div> 
     <div class="dembanner"> 
      Instructions 
     </div> 
      <div class="instructions"> 
       Here's how the project works! 

       1. Surf the Web. Try any website you would like. 
       2. You should be redirected to a news site. Do not be alarmed! 
       3. Enjoy! 
      </div> 
      <div class="introbanner"> 
      Meet the Cast 
      </div> 

      <div id="animals"> 
       <div class="animalmugshot"> 
       <img src="animalshots/thumbnails/PoliticalAnimal.png" alt="Charlie the CEO"/><br/><p>Charlie the CEO</p> 
       </div> 
       <div class="animalmugshot"> 
       <img src="animalshots/thumbnails/PoliticalFox.png" alt="Freddy the Financial Agent"/> 
       <br/> 
       <p> Freddy the Financial Agent</p> 
       </div> 
       <div class="animalmugshot"> 
       <img src="animalshots/thumbnails/PoliticalGiraffe.png" alt="Geoffry the Graphic Designer"/> 
       <br/> 
       <p>Geoffry the 
       <br/>Graphic Designer</p> 
       </div> 
      </div>  
     </div> 
    </div> 
</div> 
<div id="footer"> 

</div> 
</body> 

的CSS粘的页脚导致图像不适合在DIV

DIV的“动物”和“animalmugshots”应在“包装”和“内容”,但出于某种原因,动物溢出的白色“内容”身体部位。我很困惑,为什么?希望有人能帮助我!


===========解决方案如下:

元素#animals在儿童元素漂浮时正在崩溃。

浮动和绝对定位的元素从文档流中取出,因此导致父元素以未定义的维度折叠。

将定义的高度添加到父元素或overflow:hidden将解决此崩溃问题。

Working example – 将页脚改为黑色以提高可视性。

#animals { 
    width: 100%; 
    margin-left: 5px; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    text-align: center; 
    position: relative; 
    display: block; 
    height: auto; 
    overflow: hidden;  /* Added this.. */ 
} 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)