Question

简短的故事：我的页脚没有对margin-top做出反应，我尝试了很多种方式（好吧它实际上适用于非常大的数字，这表明边缘是从前一个元素，图像容器引出的。）这里是代码：

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放在指定高度的一个显示块容器中。见http://jsfiddle.net/pXRj3/

enter image description here

相对定位div后的保证金崩溃

1 个答案: