純粋なCSSでは、子要素が親要素の幅制限を突破できる。

文章のスタイルでは、このような状況がよく見られます

コードは次のとおりです

<div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;">
    親要素 <div style="border: 1px solid blue;height: 100px;white-space: nowrap;">
     <span>子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素子要素</span>
   </div>
 </div>

この現象をよく考えてみると、なぜでしょうか。子要素は親要素の幅を拡張するべきではないのかと疑問に思うかもしれません。親要素の高さを拡張するのと同じです。なぜでしょうか? では、この子要素の親要素をこの幅まで拡張するにはどうすればよいでしょうか?ここでは2つの解決策があります。

1. 表示: インラインブロック

レイアウトスタイルは次のとおりです

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
</head>
<スタイル>
  #ボックス1 {
    幅: 500ピクセル;
    高さ: 200px;
    境界線: 2px 青実線;
    パディング: 10px;
  }

  #ボックス2 {
    空白: ラップなし;
    表示: インラインブロック;
  }

  #ボックス3 {
    幅: 300ピクセル;
    高さ: 200px;
    背景色: 青紫;
    表示: インラインブロック;
    垂直位置合わせ: 中央;
  }

  #ボックス4 {
    幅: 400ピクセル;
    高さ: 200px;
    背景色: 黒;
    表示: インラインブロック;
    垂直位置合わせ: 中央;
  }
</スタイル>

<本文>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
      <div id="box4"></div>
    </div>
  </div>
</本文>

</html>

結果は図の通りです。Box3とbox4はbox2の幅を拡張します。

2. ディスプレイ: インラインフレックス

レイアウトスタイルは次のとおりです

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
</head>
<スタイル>
  #ボックス1 {
    幅: 500ピクセル;
    高さ: 200px;
    境界線: 2px 青実線;
    パディング: 10px;
  }

  #ボックス2 {
    空白: ラップなし;
    ディスプレイ: インラインフレックス;
  }

  #ボックス3 {
    幅: 300ピクセル;
    高さ: 200px;
    背景色: 青紫;
    垂直位置合わせ: 中央;
  }

  #ボックス4 {
    幅: 400ピクセル;
    高さ: 200px;
    背景色: 黒;
    垂直位置合わせ: 中央;
  }
</スタイル>

<本文>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
      <div id="box4"></div>
    </div>
  </div>
</本文>

</html>

効果は以下のとおりです

純粋な CSS を使用して子要素を親要素の幅制限を超えるようにする方法についての記事はこれで終わりです。子要素が親要素の幅を超える CSS に関するより関連性の高い記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML で入力テキスト入力キャッシュのクリアを禁止する 2 つの方法

>>: MySQLはデフォルトのエンジンと文字セットの詳細を変更します