Artikel Pengenalan Wulin.com (www.vevb.com): CSS3+HTML5 Studi Catatan 4-CSS Tiga-Tata Letak Tiga Kolom Hanya beradaptasi.
Di masa lalu, saat melakukan tata letak tiga kolom, metode yang paling umum dan paling sederhana adalah: menggunakan float+margin untuk mengimplementasikannya. Di era CSS3, kita dapat memiliki metode modis lainnya, yang merupakan model kotak di CSS3, dengan kode sebagai berikut:
CSS3 Tata Letak Tiga Kolom CSS3 Tata Letak Tiga Kolom MiddleleftrightEfek operasi di bawah Google Chrome adalah sebagai berikut:
Ringkasan: Atribut kotak-flex terutama digunakan di sini. Atribut ini terutama memungkinkan wadah anak untuk membagi lebar sesuai dengan aturan tertentu relatif terhadap wadah induk. Jika ketiga wadah anak menetapkan nilai kotak-flex ke masing-masing 1, 2, dan 3, ketiga wadah anak akan membagi lebar sesuai dengan rasio 1: 2: 3.
Tentu saja, wadah induk harus diatur untuk menjadi model kotak untuk melihat efeknya, seperti tampilan: -webkit-box; Tampilan: -Moz-box;
Namun, jika Anda menjalankan kode di atas secara langsung, tidak ada masalah di Chrome, tetapi ketika datang ke Firefox, itu menjadi sebagai berikut:
, apakah ini bug firefox? Awalnya, lebar di sisi kiri dan kanan diperbaiki, tetapi lebar di tengah tidak memiliki lebar adaptif. Setelah berkomunikasi dengan penulis "The Otoritative Guide to HTML5 dan CSS3", saya menyadari bahwa situasi ini terjadi karena lebar wadah induk tidak ditetapkan. Cukup tambahkan lebar: 100% ke wadah induk. . . Terima kasih kepada penulis "HTM5 dan CSS3 Otoritative Guide" ...