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

  • Z时代
  • 2024-01-10
  • 分类：问答

<!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.. */ 
}

回答：

需要清除漂浮在#animals或所有div

div:after //OR 
#animals:after { 
    display: table; 
    content: ''; 
    clear: both; 
}

以上是 的CSS粘的页脚导致图像不适合在DIV 的全部内容， 来源链接： utcz.com/qa/260581.html

回到顶部