html - 相对定位 div 后边距崩溃

Question

短篇小说:我的页脚对 margin-top 没有反应，我尝试了很多不同的方式(它实际上适用于非常大的数字，这表明 margin 是由前一个元素，图像容器引导的)。这是代码:

HTML(我已经很明显地删除了内容，并且没有附加在内容之前的头部部分):

<div id="content">
    <h1 id="top">header</h1>
    <div id="billboard">
        <div id="buttony">
        buttons
        </div>
    </div>
    <div class="pasek">
    </div>
    <h2 class="naglowek">Najnowsze prace:</h2>

    <div class="photo"><div class="heading"><span>text</span></div><a href="#"><img src="img/thumb1.jpg" alt="smu"/></a><div class="caption"><span>text</span></div></div>
    <div class="photo"><div class="heading"><span>text</span></div><a href="#"><img src="img/thumb2.jpg" alt="smu"/></a><div class="caption"><span>text</span></div></div>
    <div class="photo"><div class="heading"><span>text</span></div><a href="#"><img src="img/thumb3.jpg" alt="smu"/></a><div class="caption"><span>text</span></div></div>


</div>
<div id="footer">
    <div id="footerwrap">
    <div class="footerblock"><h3 id="nav">header</h3>
    <ol>
            <li><a href="index.html">link</a></li>
            <li><a href="omnie.html">link</a></li>
            <li><a href="portfolio.html">link</a></li>
            <li><a href="kontakt.html">link</a></li>
        </ol>

    </div>
    <div class="footerblock"><h3 id="info">header</h3><p>some content </p>
    </div>
    <div class="footerblock"><h3 id="plus">header</h3>
    <p class="links"><a target="_blank" href="http://www.smashingmagazine.com">Smashing Magazine</a></p>
    <p class="links"><a target="_blank" href="http://www.w3schools.com">W3 Schools</a></p>
    <p class="links"><a target="_blank" href="http://www.w3.org">W3 Consortium</a></p>
    </div>
    </div>
    </div>

这是 CSS 部分:

div#content{
    width: 960px;
    margin: 0 auto;
}
div#content h1#top{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 56px;
    text-align: center;
    color: #333333;
    padding: 0 0 10px;
    margin: 20px auto;
    border-bottom: 4px #d4d4d4 dashed;

}
div#content h1#top span{
    color: #c24b4b;
}
div#content div.pasek{
    width: 960px;
    height: 30px;
    background-image: url('img/pasek.jpg');
    margin: 10px 0;
}
div#content div#billboard{
    width: 960px;
    height: 500px;
    background-color: #ffffff;
    background-image: url('img/bb.jpg');
    background-repeat: no-repeat;
}
div#content div#billboard img{
    max-width: 100%;
    max-height: 100%;
}
div#content div#billboard a:first-of-type{
    margin-right: 40px;
}
div#content div#billboard div#buttony{
    width: 565px;
    position: relative;
    top: 380px;
    left: 321px;
}
div#content h2.naglowek{
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 36px;
    color: #191a1c;
    padding: 5px 55px;
    margin: 20px auto;
    border-bottom: 2px #d4d4d4 dashed;
    background: url('img/tools.jpg') no-repeat;
}
/* jQuery podpisy*/
div.photo{
    margin: 0 7px 7px;
    position: relative;
    overflow: hidden;
    float: left;
    width: 292px;
    height: 292px;
    border: 4px #212226 solid;
}
div.photo div.heading, div.photo div.caption {
    position: absolute;
    background-color: #0e0e0f;
    height: 30px;
    width: 300px;
    color: white;
    text-align: center;
    opacity:0.8;
    filter:alpha(opacity=80);  
    -moz-opacity:0.8;    
    -khtml-opacity: 0.8; 
}
div.photo div.heading{
    padding-top: 10px;
    top: -40px;
}
div.photo div.heading span{ 
    font-size: 20px;
    display: block;
    margin-top: -2px;
}
div.photo div.caption{
    padding-top: 10px;
    bottom: -40px;
}
div.photo div.caption span{
    color: #d3d3d3; 
    font-size: 11px;
    display: block;
    padding: 0 10px;
}
/* jQuery podpisy koniec*/
/* CONTENT END*/
/* FOOTER */
div#footer{
    clear: both;
    margin-top: 60px;
    color: #636363;
    font-size: 14px;
    height: 300px;
    background-color: #131415;
    background-image: url('img/pasek2.jpg');
    background-repeat: repeat-x;
}
div#footer div#footerwrap{
    width: 960px;
    margin: 0 auto;
}
div#footer div.footerblock{
    float: left;
    width: 320px;
    margin-top: 40px;
}
div.footerblock h3{
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    font-size: 24px;
    color: white;
    padding-top: 15px;
    height: 39px;
}
div.footerblock h3#nav{
    background: url('img/world.jpg') no-repeat 25px;
}
div.footerblock h3#info{
    background: url('img/info.jpg') no-repeat 25px;
}
div.footerblock h3#plus{
    background: url('img/chat.jpg') no-repeat 25px;
}
div.footerblock li{
    font-size: 18px;
    padding: 15px 0 10px 40px;
    margin: 0 20px;
    background: url('img/flash.jpg') no-repeat 10px;
    border-bottom: 1px white solid;
}
div.footerblock a:hover{
    color: #808080;
}
div.footerblock p{
    margin: 20px;
    line-height: 20px;
}
div.footerblock p.links{
    background: url('img/cloud.jpg') no-repeat 10px 0;
    margin: 17px 20px;
}
div.footerblock p a{
    font-size: 16px;
    color: #636363;
    padding-left: 45px;
    padding-bottom: 6px;
    display: block;
    border-bottom: 1px #636363 solid;
}

不确定要删除 CSS 的哪些部分，因为只要可疑的部分更改对我不起作用，我猜它可能是任何东西。如果太多请告诉我会删除不需要的部分。

Answer 1

这是您需要做的。 将所有 div.photo div 放在一个指定高度的显示 block 容器中。看这里http://jsfiddle.net/pXRj3/