Gunakan div untuk melaksanakan kaedah reka letak seperti jadual_Pertukaran pengalaman

Ramai pereka web suka meletakkan dua atau lebih bekas bersebelahan pada ketinggian yang sama dan memaparkan kandungan setiap bekas di dalamnya, sama seperti sel dalam reka letak jadual klasik mengawal kedudukan beberapa lajur berpusat atau sejajar 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.

Mari kita lihat struktur xhtml dahulu:

Mudah untuk difahami tanpa penjelasan, tetapi berikut adalah struktur jadual, adakah ia sangat serupa?

 
  
   
   
   
  

Berikut ialah css:

.sama {
paparan:jadual;
runtuhan sempadan:separate;
}
.baris {
paparan:baris jadual; .row div {
display:table-cell;
}
.row .one {
width:200px; }
.row .two {
width:200px ;
}
.baris .tiga {

}

Penjelasan:

1 .dispaly:table; elemen peringkat blok, iaitu, anggap ia sebagai jadual
2.sempadan-runtuhkan:separate; paparkan .baris sebagai baris jadual tr
4.paparan:table-cell; 10px; juga digunakan di sini untuk membezakan beberapa kotak Seperti yang dinyatakan di atas, ia tidak boleh dipaparkan secara normal 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 boleh dipaparkan dengan sempurna selepas ujian