Bir CSS nasıl "ekran: tablo-sütun&; çalışmak gerekiyordu"?

SORU

1 EKİM 2011, CUMARTESİ

Bir CSS nasıl "ekran: tablo-sütun&; çalışmak gerekiyordu"?

Aşağıdaki HTML ve CSS verilen, benim tarayıcıda hiçbir şey (Krom ve yazma YANİ şu anda bir son görüyorum. Her şey 0x0 px aşağı çöker. Neden?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

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

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <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>
</body>
</html>

CEVAP

21 Aralık 2012, Cuma

CSS tablo modeli HTML tablo modeline dayalı http://www.w3.org/TR/CSS21/tables.html

Bir tablo SATIR ayrılmıştır, ve her satır bir veya daha fazla hücre içerir. Hücreler SATIR çocuk, HİÇ sütunlar çocukları olduklarını.

<>"ekran: tablo-sütun" sütun düzenleri (içerik gelecek için bir sütun akışı birden çok sütun, örneğin gazete sayfaları) yapmak için bir mekanizma sağlamaz. p

Daha doğrusu, "tablo-sütun" YALNIZCA ayarlayan bir tablonun satırları içinde ilgili hücreler için geçerli öznitelikleri. E. g. "Her satırdaki ilk hücreye arka plan rengi yeşil" tarif edilebilir.

Tablonun kendisi her zaman HTML de aynı şekilde yapılandırılmıştır.

HTML ("", "tr"ler, "col"s): . içerde DEĞİL içeride s td inceleyin

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

CSS tablo özellikleri (Not olan "sütun" divs -- standart içeriğini sütunlara doğrudan izin vermez herhangi bir içerik içermez: kullanarak HTML

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></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>

CSS:

.mytable {
  display: table;
  ...
}
.myrow {
  display: table-row;
  ...
}
.mycell {
  display: table-cell;
  ...
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
  ...
}

İSTEĞE bağlı: her iki "satır" ve "sütun" gibi satır ve her hücre için birden çok sınıf atayarak tarz olabilir. Bu yaklaşım, hücrelerin çeşitli ayarlar, ya da tek tek hücreler belirterek, maksimum esneklik, tarz verir:

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

Yararlı css bildirimleri, etkilemek istediğiniz ne bağlı olarak, vardır:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}

Çok amaçlı <div> kullanan günümüzün esnek tasarımlar, koymak akıllıca olacaktırbazıbakın yardım için her div, sınıf. Burada, HTML içinde oldu* *14 <td> <tr> eskiden class mycell oldu. Bu Sözleşme, yukarıda CSS seçiciler kullanışlı yapan şeydir.

PERFORMANS UNUTMAYINher hücre sınıf isimleri koymak, ve yukarıda çok sınıf seçiciler kullanarak, .row1 * .row1 > * gibi * ile biten seçiciler kullanarak daha iyi bir performans. Nedeni seçiciler eşleştirilirdün ilkeşleşen elemanları aranmaktadır , yani .row1 * ilk maçları *tümelemanları, ve sonra kontrol ederher elementin bütün atalareğer herhangi bir atası class row1 varsa bulmak için. Bu yavaş bir cihaz üzerinde karmaşık bir belgede yavaş olabilir. .row1 > * sadece hemen üst incelenir, çünkü daha iyidir. Daha iyi ama yine de hemen en elemanları, .row1 .cell1 ile ortadan kaldırmak için. (.row1 > .cell1 bir daha sıkı spec, ama ilk adım arama yapan en büyük fark, bu yüzden genellikle değil değer karmaşası ve ekstra düşünce süreci olarak kalacak her zaman doğrudan bir çocuk, ekleme, çocuğun seçici >.)