Susun atur div_CSS/HTML seperti jadual

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Berikut ialah apa yang saya terjemah, iaitu terjemahan percuma berdasarkan pemahaman saya daripada artikel itu, jangan cari kesalahan terjemahan, tujuan saya hanyalah untuk menyampaikan teknik CSS ini

Ramai pereka web suka meletakkan dua atau lebih bekas bersebelahan dengan ketinggian yang sama, dan memaparkan setiap bekas di dalamnya Kandungan bekas adalah seperti sel dalam susun atur jadual klasik yang mengawal kedudukan beberapa lajur Anda juga suka kandungan bekas itu dipusatkan atau dijajarkan atas.
Tetapi anda tidak suka menggunakan jadual untuk melaksanakannya, jadi apakah yang perlu anda lakukan? Terdapat banyak cara untuk melaksanakannya, termasuk melaksanakannya berdasarkan ilusi visual, menggunakan kawalan JS untuk menjadikan ketinggian sama, dan menggunakan kaedah menyembunyikan bahagian limpahan bekas dan menggabungkan sempadan bawah negatif lajur dan dalaman positif. tampal untuk menyelesaikan masalah ketinggian lajur yang sama.
Malah, terdapat kaedah mudah, yang boleh dicapai dengan menggunakan display:table, display:table-row dan display:table-cell, dan bekas dengan ketinggian kecil akan menyesuaikan diri dengan yang mempunyai ketinggian yang agak tinggi, tetapi IE tidak menyokong Atribut ini, kita tidak perlu menyalahkan IE buat masa ini, saya percaya ia akan diperbaiki pada masa hadapan. Di sini saya membuat model.

Pertama lihat struktur xhtml:

Ia sangat mudah untuk difahami tanpa penjelasan, tetapi berikut ialah struktur jadual, adakah ia sangat serupa?














Berikut ialah css:
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
lebar:200px;
}
.baris .tiga {

}

Penjelasan:
1.dispaly:table; Biarkan layer.equal digunakan sebagai tahap blok Paparan jadual elemen adalah untuk menganggapnya sebagai jadual
2.border-collapse:separate; sama seperti sebelum jadual telah menggabungkan sel
3.display:table-row; ; layan .row sebagai Jadual tr paparan
4.display:table-cell; spacing:10px juga digunakan di sini ; untuk membezakan antara beberapa kotak Seperti yang dinyatakan di atas, ia tidak boleh dipaparkan seperti biasa di bawah IE, tetapi ia boleh dipaparkan di bawah: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b dan Netscape 7.1 selepas ujian paparan sempurna.
Sekarang seluruh misi telah tamat.