이것은 현재 HTML 구조입니다. 바닥 글 div는 혼자 몸에 앉아 있습니다. 내가 지금까지 폭 무엇 배경색 설정을 할 수 있도록 컨테이너의 폭을 확장 할CSS의 컨테이너를 확장하려면 div가 필요합니다.
#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 : 여기
<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의 화면이있을 수 있습니다.
너비를 100 %로 설정하면 컨테이너 크기가됩니다. 예상대로입니다. 어떻게하면 페이지 너비에 맞출 수 있습니까?
시도했으나 작동하지 않았습니다. # footer-bg는 절대 위치이고 .footer [1 | 2]의 부모이므로 왼쪽과 오른쪽은 div와 관련됩니다. . 컨테이너와 동일합니다. – zilla