0

これが私の現在のHTML構造です。フッターdivはBODYに一人で座っています。

  <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％に設定すると、コンテナのサイズになります-予想どおりです。ただし、どうすればページの幅に合わせることができますか？

4

2 に答える 2

1

leftプロパティとrightプロパティの両方を0に設定してみてください。

于 2009-11-11T08:16:46.370 に答える
0

あなたは質問をうまく定義しませんでした。

中間のマージンに設定したい場合

margin:0 10px;
width:%your pages width%;

他の何かを意味する場合は、Firefox用のFirebugプラグインをダウンロードし、やりたいことを実行したページのフッターを調べて、構造とcssルールを確認してください。それは常に機能します

于 2011-10-30T09:37:59.283 に答える