CSS "display: table-column" の謎を解く

HTML と CSS のプロパティを調(diào)査すると、興味深い疑問につながることがよくあります。このようなクエリの 1 つは、謎めいた「display: table-column」宣言を使用して CSS テーブルベースのレイアウトを?qū)g裝するときに発生します。その魅力にもかかわらず、このプロパティにはかなり特殊な目的があり、正しく理解していないと不可解な結(jié)果につながる可能性があります。

背景: CSS テーブル モデル

CSS テーブルモデルは、HTML テーブル モデルから多くを借用した複雑なシステムです。このモデルでは、テーブルは行と列で構(gòu)成され、行と列の各交點(diǎn)をセルが占めます。セルは行の直接の子孫ですが、列とは直接の関係はありません。

「display: table-column」の目的

一般的な考えに反して、「 「display: table-column」プロパティでは、列形式のレイアウトを作成する方法は提供されません。その唯一の目的は、テーブル行內(nèi)のセルに特に適用される屬性を定義することです。言い換えれば、行內(nèi)の位置に基づいて特定のセルの背景色やフォント サイズなどの特性を指定できるようになります。

ただし、テーブル構(gòu)造は従來のものと同じであることに注意することが重要です。 HTML。列にはコンテンツが直接含まれません。代わりに、行內(nèi)のセルのレイアウトに影響を與える論理構(gòu)造としてのみ存在します。

説明例

次の HTML および CSS コードを考えてみましょう:

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

<code class="css">section {
  display: table;
  height: 100%;
  background-color: grey;
}

#colLeft,
#colRight {
  display: table-column;
  height: 100%;
}

#row1,
#row2,
#row3 {
  display: table-row;
  height: 100%;
}

#cell1,
#cell2,
#cell3 {
  display: table-cell;
  height: 100%;
}</code>

この例では、「display: table-column」宣言が「colLeft」要素と「colRight」要素に適用されます。これらの要素にはコンテンツは含まれません。それらの唯一の目的は、それぞれの行內(nèi)のセルのレイアウトを定義することです。

これらの列定義が存在するにもかかわらず、ブラウザには何も表示されないことに気づくかもしれません。これは、前述したように、列にはコンテンツが直接含まれていないためです。コンテンツは、テーブル行の子であるテーブル セル內(nèi)に配置する必要があります。

これを修正するには、コンテンツをテーブル セル內(nèi)に配置するように HTML 構(gòu)造を変更する必要があります。

<code class="html"><section>
  <div id="colLeft">
    <div id="row1">
      <div id="cell1">AAA</div>
    </div>
    <div id="row2">
      <div id="cell2">BBB</div>
    </div>
  </div>
  <div id="colRight">
    <div id="row3">
      <div id="cell3">CCC</div>
    </div>
  </div>
</section></code>

これにより、変更すると、コンテンツが期待どおりに表示され、「display: table-column」が適切に使用されていることがわかります。

以上がCSS の「display: table-column」の本當(dāng)の目的は何ですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。