Kompatibilitas browser selalu menjadi masalah umum dalam tata letak CSS.
Dua metode ini memiliki keunggulan berikut:
1. Tidak perlu menggunakan hack
2. Sederhana dan efektif, Anda bisa melakukannya dengan sekilas
3. Tata letak hierarkis dan modular
4. Kode lebih masuk akal dan lebih mudah diidentifikasi
Metode 1: Selesaikan misalignment mengambang yang disebabkan oleh menambahkan jarak internal dan eksternal
Kami biasanya perlu menggunakan float untuk mengambang saat tata letak multi -kolom.
Untuk mencapai efek ini, kami akan menambahkan margin untuk membuat kolom langsung dari jarak, dan juga menambahkan batas, dan bantalan sehingga teks di dalam tidak akan menempel di perbatasan. Tetapi situasi yang tidak terduga terjadi.
Di kolom ketiga, jalankan ke bawah. Ini bukan efek yang Anda inginkan. Lalu mari kita analisisnya. Menurut Ide Umum. Lebar keseluruhan adalah 800px, kolom kiri adalah 200, 400 tengah, dan kolom kanan adalah 200, yang terlihat bagus, tetapi harus ada jarak antara kolom ini, jadi Anda perlu mengubahnya: kolom kiri 190, tengah 400, dan kolom kanan 190. Apakah tidak apa -apa?
Tapi demi ketampanan, Anda menambahkan perbatasan. Tapi saya lupa bahwa perbatasan juga akan meningkatkan lebar. -BORDER 2 = 168, agar tidak misalign. Tapi tidakkah Anda merasa sedikit rumit? Akan ada celah dalam tata letak beberapa browser.
Oke, mari kita bicara tentang metode saya. Menurut hierarki, saya memisahkan tata letak dan layar. Tata letak adalah bahwa selain lebar dan pitch luar mengambang, tata letak lebih mudah dihitung. Kemudian kami menambahkan div di kolom tata letak untuk menampilkan perbatasan, jarak internal dan eksternal, dll. Anda tidak perlu menentukan lebar, Anda dapat beradaptasi. Untuk memfasilitasi ingatan Anda, saya mengimprovisasi sebuah puisi: lebar tetap harus mengambang, tanpa batas atau tambalan, menempatkan div di dalam, dan menentukan gaya untuk bekerja!
Metode 2: Selesaikan elemen mengambang internal dari lapisan luar
Untuk membuat katalog produk atau album gambar, kami menggunakan UL atau N Divs untuk mengapung.
Tetapi segalanya bertentangan dengan keinginan mereka.
Solusi untuk ini sebenarnya sangat sederhana.
1. Anda dapat menambahkan float: kiri;
2. Metode lain adalah menempatkan div untuk membersihkan mengambang di ujung setelah pelampung selesai.
3. Tambahkan tinggi atau lebar ke lapisan luar.