這是我目前的HTML結構。頁腳div獨自坐在BODY中。CSS需要div來擴展它的容器寬度
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
下面是它的CSS:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
我試圖讓.footer2和.footer3延長容器允許我對什麼都寬背景色設置的寬度屏幕可能是。
設置100%的寬度只是獲得它的容器的大小 - 正如我所料。但是,我怎樣才能使它達到頁面的寬度?
試過了,沒有工作。 #footer-bg絕對是位置,它是.footer [1 | 2]的父級,所以左右相對於該div。與.container一樣。 – zilla 2009-11-11 08:25:09