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

親の制限を超えて子 DIV の幅を拡張する

CSS では、通常、子 DIV の幅を親よりも広くすることはお勧めできません。ただし、このような状況に陥った場合は、自由に使える解決策がいくつかあります。

オプション 1: 絶対配置を使用する

子 DIV を削除できる場合ドキュメント フローからは、絶対配置を使用して幅をブラウザのビューポートの 100% に設定できます。子を端から端まで水平方向に伸ばすには、必ず左と右を 0 に設定してください。

オプション 2: 計算可能なマージンを使用した一般的な解決策

子の DIV を保持するにはドキュメント フローに応じて、希望の幅を実現するために負のマージンを計算できます。

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

このソリューションでは、次のことが保証されます。子 DIV は親内に留まり、その幅をビューポート全体に拡張します。この式では:

• -50vw は、子 DIV をビューポート幅の半分だけ左に移動します
• 親の幅の半分を追加することで、この移動を 50% オフセットします

親戚との考慮事項Positioning

親 DIV にposition:relative がある場合、子 DIV の left および right プロパティは親に対して相対的になります。これを回避するには、transform プロパティを使用して子 DIV を変換します。

.child {
  ...
  transform: translate(-50%, 0);
}

これにより、子 DIV はコンテナを尊重しながら親の境界を超えて拡張されます。

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