Warum funktioniert „Anzeige: Tabellenspalte“ nicht in meinem CSS-Layout?
Angesichts des bereitgestellten HTML- und CSS-Codes, Sie erwarten Sie möglicherweise ein Layout mit zwei Spalten („colLeft“ und „colRight“) und drei Zeilen („row1“, „row2“ und „row3“). In Browsern wie Chrome und IE wird das gesamte Layout jedoch auf die Größe Null reduziert.
Dieses Verhalten ist auf ein grundlegendes Missverständnis der Funktionsweise des CSS-Tabellenmodells zurückzuführen. Obwohl es dem HTML-Tabellenmodell ähnelt, gibt es entscheidende Unterschiede:
Korrekte HTML- und CSS-Struktur:
Um ein gültiges CSS-Tabellenlayout zu erstellen, sollten Sie Folgendes tun Verwenden Sie die folgende Struktur:
<code class="html"><div class="mytable"> <div class="mycolumn1"></div> <div class="mycolumn2"></div> <div class="myrow"> <div class="mycell">Contents of first cell in row 1</div> <div class="mycell">Contents of second cell in row 1</div> </div> <div class="myrow"> <div class="mycell">Contents of first cell in row 2</div> <div class="mycell">Contents of second cell in row 2</div> </div> </div></code>
<code class="css">.mytable { display: table; } .mycolumn1 { display: table-column; background-color: green; } .mycolumn2 { display: table-column; background-color: red; } .myrow { display: table-row; } .mycell { display: table-cell; }</code>
Das obige ist der detaillierte Inhalt vonWarum funktioniert „display: table-column' im CSS-Tabellenlayout nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!