CSS を使用して子 DIV を親よりも広くするにはどうすればよいですか?

CSS を使用して親の境界を越えて子 DIV の幅を拡張する

CSS を使用すると、親コンテナの外側に子 DIV の幅を拡張できます。これにより、子 DIV をブラウザのビューポート全体に拡張できるようになります。

一般的な解決策

これを実現するには、子要素で次の CSS プロパティを使用します。

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• 幅: 100vw;子の幅をビューポートの 100% に設定し、ブラウザ ウィンドウ全体に広がります。
• 位置: 相対;子の位置が親を基準にして相対的であることを確認し、調整を可能にします。
• left: calc(-50vw 50%);子の左端をビューポートの 50% から親の幅の 50% を引いた分オフセットし、ブラウザの左境界に揃えます。

Example

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

この例では、幅 400 ピクセルの親 DIV と拡張された子 DIV を作成します。ビューポート全体の幅。

以上がCSS を使用して子 DIV を親よりも広くするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。