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

純粋な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はデフォルトのエンジンと文字セットの詳細を変更します

推薦する

スキン効果を実現するJavaScript(背景の変更)

この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...

VMware仮想マシンの起動時に黒い画面が表示される問題を解決する

# VMware ハードディスクの起動優先順位を調整するステップ 1: 電源をオンにすると、BIOS...

MySQL Shellの紹介とインストール

目次01 レプリ​​カセットアーキテクチャ02 MySQL Shellの紹介とインストール03 My...

uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード

効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...

LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します

今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...

vue の v-bind を理解する

目次1. v-bindの主要ソースコードの分析1. v-bind属性はどこに均一に保存されるか: a...

HTML文書におけるol要素の数値制限に関する議論

一般的に言えば、HTML ドキュメント内で極端に大きな <ol> リストに遭遇する可能性...

Linux ベースの MySQL マスター スレーブ構成の全プロセスを記録する

mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

Vueソースコード解析における仮想DOMの詳しい説明

なぜ仮想DOMが必要なのでしょうか?仮想 DOM はブラウザのパフォーマンス問題を解決するために設計...

マウスを動かしたときに画像のズーム効果とゆっくりとした遷移​​効果を実現するCSSのサンプルコード

transform:scale()比例したズームインまたはズームアウトを実現できます。 transi...

Ubuntu 20.04 ファイアウォール設定の簡単なチュートリアル (初心者)

序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...

Javascript フロントエンド最適化コード

目次if判定の最適化1. 最も簡単な方法:判断2. より良い方法: スイッチ3. より良いアプローチ...