Question

<!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>

div“animals”和“animalmugshots”应该在“包装”和“内容”中，但由于某种原因，动物会溢出白色的“内容”身体部位。我很困惑为什么？希望有人可以帮助我！

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

当元素浮动时，元素#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.. */
}

Answer 2

需要清除#animals或所有div中的浮动

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

Css粘性页脚导致图像不适合div

2 个答案: