CSS 表示テーブルの適応的な高さと幅の問題の解決策

定義と使用法

display プロパティは、要素が生成するボックスのタイプを指定します。

例示する

この属性は、レイアウトを構築するときに要素が生成する表示フレームのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、display を使用すると、HTML で定義された display 階層に違反する可能性があるため、注意しないと危険です。 XML にはそのような階層が組み込まれていないため、すべての表示が絶対に必要です。
可能な値

display: table-cell が設定されている要素:

• 幅と高さに敏感
• マージン値への応答なし
• レスポンシブなパディングプロパティ
• コンテンツがオーバーフローすると、親要素が自動的に拡張されます。

上記の効果画像は、左側のアバター部分に float left フローティング属性を使用し、右側に display: table-cell を使用して 2 列の適応型レイアウトを実現しています。

display: table; 外側のレイヤーは幅と高さを定義し、内部のコンテンツは幅と高さに適応します。子要素が div の場合、各列の幅は均等に分割されません。したがって、子要素にはliタグを使用することをお勧めします。

.cssテーブル{
      表示: テーブル;
      高さ: 2rem;
      幅: 5rem;
  }
  .css-テーブル背景{
      表示: テーブルセル;
      垂直位置合わせ: 中央;
      テキスト配置: 中央;
      背景色: コーラル;
  }
  .cssテーブルli{
      表示: テーブルセル;
      垂直位置合わせ: 中央;
      テキスト配置: 中央;
      背景色:ダークカーキ;
  }

    <div class="css-table">
     <div class="css-table-bg">1</div>
        <div class="css-table-bg">2</div>
        <div class="css-table-bg">3</div>
    </div>
    <div class="css-table">
        <ul> 
            <li><a href="#">ホーム</a></li>
            <li><a href="#">概要</a></li>
            <li><a href="#">クライアント</a></li>
        </ul>
    </div>

CSS ディスプレイ テーブルの適応型の高さと幅の問題を解決する方法についての記事はこれで終わりです。適応型 CSS ディスプレイ テーブルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。