Berikut ini yang saya terjemahkan, Ini adalah terjemahan gratis berdasarkan pemahaman saya terhadap artikel tersebut. Mohon jangan mencari-cari kesalahan dalam terjemahannya. Tujuan saya hanya untuk menyampaikan keterampilan CSS ini.
Banyak desainer web suka menempatkan dua wadah atau lebih secara berdampingan pada ketinggian yang sama dan menampilkan konten setiap wadah di dalamnya, seperti sel dalam tata letak tabel klasik yang mengontrol posisi beberapa kolom. Konten ditampilkan di tengah atau rata atas.
Namun Anda tidak suka menggunakan tabel untuk mengimplementasikannya, jadi apa yang harus Anda lakukan? Ada banyak cara untuk menerapkannya, termasuk menerapkannya berdasarkan ilusi visual, menggunakan kontrol JS untuk menyamakan ketinggian, dan menggunakan metode menyembunyikan bagian luapan wadah dan menggabungkan batas bawah negatif kolom dan batas dalam positif. patch untuk menyelesaikan masalah tinggi kolom yang sama.
Faktanya, ada metode sederhana, yang dapat dicapai dengan menggunakan display:table, display:table-row dan display:table-cell, dan container dengan ketinggian kecil akan beradaptasi dengan container dengan ketinggian yang relatif tinggi, tetapi IE tidak mendukung atribut ini. Kami Jangan salahkan IE untuk saat ini, saya yakin ini akan membaik di masa depan. Di sini saya membuat model.
Pertama lihat struktur xhtml:
<kelas div=sama>
<kelas div=baris>
<div kelas=satu></div>
<div kelas=dua></div>
<div kelas=tiga></div>
</div>
</div>
Sangat mudah untuk dipahami tanpa penjelasan, tapi berikut adalah struktur tabelnya, apakah sangat mirip?
<tabel>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tabel>
Ini cssnya:
.setara {
tampilan:meja;
keruntuhan perbatasan:terpisah;
}
.baris {
tampilan: baris tabel;
}
.baris div {
tampilan: sel tabel;
}
.baris .satu {
lebar:200 piksel;
}
.baris .dua {
lebar:200 piksel;
}
.baris .tiga {
}
menjelaskan:1.dispaly:table; Biarkan layer.equal ditampilkan sebagai tabel elemen tingkat blok, yaitu memperlakukannya sebagai tabel
2.border-collapse:separate; Perbatasannya independen, sama seperti sebelum tabel menggabungkan sel.
3.display:table-row; menampilkan .row sebagai baris tabel tr
4.display:table-cell; menampilkan div bawahan .row sebagai sel tabel td
5. Kemudian tentukan lebarnya
Border-spacing:10px; juga digunakan di sini untuk membedakan beberapa kotak. Seperti disebutkan di atas, ini tidak dapat ditampilkan secara normal di IE, tetapi: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8 b, dan Netscape 7.1 dapat ditampilkan dengan sempurna setelah pengujian.