Merungkai Enigma CSS "display: table-column"

Penerokaan sifat HTML dan CSS sering membawa kepada soalan yang menarik. Satu pertanyaan sedemikian timbul apabila melaksanakan susun atur berasaskan jadual CSS menggunakan pengisytiharan "display: table-column" yang membingungkan. Di sebalik tarikannya, sifat ini mempunyai tujuan yang agak khusus, yang boleh membawa kepada hasil yang membingungkan jika tidak difahami dengan betul.

Latar Belakang: Model Jadual CSS

Jadual CSS model ialah sistem rumit yang banyak meminjam daripada model jadual HTML. Dalam model ini, jadual terdiri daripada baris dan lajur, dengan sel menduduki setiap persimpangan baris dan lajur. Walaupun sel adalah keturunan langsung baris, ia tidak mempunyai hubungan langsung dengan lajur.

Tujuan "paparan: lajur jadual"

Bertentangan dengan kepercayaan popular, " display: table-column" tidak menyediakan cara untuk membuat reka letak lajur. Tujuan tunggalnya ialah untuk mentakrifkan atribut yang digunakan secara khusus pada sel dalam baris jadual. Dalam erti kata lain, ini membolehkan kami menentukan ciri seperti warna latar belakang atau saiz fon untuk sel tertentu berdasarkan kedudukannya dalam baris.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa struktur jadual kekal sama seperti dalam bentuk tradisional. HTML. Lajur tidak mengandungi kandungan secara langsung; sebaliknya, ia wujud semata-mata sebagai binaan logik yang mempengaruhi reka letak sel dalam baris.

Contoh Ilustrasi

Pertimbangkan kod HTML dan CSS berikut:

<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>

Dalam contoh ini, pengisytiharan "display: table-column" digunakan pada Elemen "colLeft" dan "colRight". Unsur-unsur ini tidak mengandungi sebarang kandungan; tujuan tunggal mereka adalah untuk mentakrifkan susun atur sel dalam baris masing-masing.

Walaupun terdapat takrifan lajur ini, anda mungkin mendapati tiada apa-apa yang muncul dalam penyemak imbas. Ini kerana, seperti yang dinyatakan sebelum ini, lajur tidak mengandungi kandungan secara langsung. Kandungan mesti diletakkan dalam sel jadual, yang merupakan anak baris jadual.

Untuk membetulkannya, kami perlu mengubah suai struktur HTML kami untuk meletakkan kandungan dalam sel jadual:

<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>

Dengan ini pengubahsuaian, kandungan muncul seperti yang diharapkan, menunjukkan penggunaan "paparan: lajur jadual" yang betul.

Atas ialah kandungan terperinci Apakah tujuan sebenar \'display: table-column\' dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!