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 mari kita lihat struktur xhtml:
| ＜div class="sama"＞ ＜kelas div="baris"＞ ＜div class="satu"＞＜/div＞ ＜div class="dua"＞＜/div＞ ＜div class="tiga"＞＜/div＞ ＜/div＞ ＜/div＞ |
Sangat sederhana untuk memahaminya tanpa penjelasan, tetapi berikut adalah struktur tabelnya, apakah sangat mirip?
| ＜tr＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜/tr＞ ＜/meja＞ |
Ini cssnya:
setara { } |
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.