4

子 div を含む div があるとします。コンテナーの div はmargin: 0auto に設定されているため、幅を大きくすると、div が両側に拡張されます。このコンテナー内の div もmargin: 0auto に設定されている場合、この div をそのコンテナー div を超えて拡張し、左右に均等に到達させる方法はありますか?

次の例は、.background の幅がコンテナーの幅を超えて増加した場合、そのサイズは右側からのみ増加し、両側からは増加しないことを示しています。

css と html:

.container {
  width: 600px;
  background-color: lightgreen;
  margin: 0 auto;
}
.background {
  width: 300px;
  margin: 0 auto;
  background-color: blue;
}
.content {
  width: 200px;
  background-color: lightblue;
  margin: 0 auto;
}
<div class = "container">
  <div class = "background">
    <div class = "content">
      content
    </div>
  </div>
</div>

http://jsfiddle.net/DpYGm/2/

これはすべて、バナー グラフィックの背景画像をページの本文の幅全体に広げようとする試みですが、ページの内側のコンテンツは同じままにしておきます。

4

3 に答える 3

6

backgrounddiv を両側に 50px 突き出させたいとします。CSS でこれを行うことができます。

.background {
    margin: 0 -50px 0 -50px;
    background-color: #00F;
}

完全な例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <style media="all">

      .container {
        width: 500px;
        background-color: lightgreen;
        margin: 0 auto;
        height: 400px; /* for illustration */
      }
      .background {
        margin: 0 -50px;
        background-color: blue;
      }
      .content {
        width: 200px;
        background-color: lightblue;
        margin: 0 auto;
      }

    </style>

  </head>
  <body>

    <div class = "container">
      <div class = "background">
        <div class = "content">
          content
        </div>
      </div>
    </div>

  </body>
</html>

于 2013-05-07T14:48:08.970 に答える
3

確かに：

.container {
    width: 600px;
    background-color: #eee;
    margin: 0 auto;
    padding: 10px 0;
}
.background {
    width: 400px;
    margin: 0 auto;
    background-color: blue;
    padding: 10px 0;
}
.content {
    width: 500px;
    background-color: red;
    margin-left: -50px;
}

http://jsfiddle.net/yBcpu/1/

于 2013-05-07T14:45:53.533 に答える