Tutorial pengenalan reka letak halaman web CSS 8: Tiga lajur lebar lajur tengah terapung adaptive_Tutorial Asas

Menggunakan kaedah penentududukan terapung, lebar tetap dan penyesuaian daripada satu lajur kepada berbilang lajur pada asasnya boleh diselesaikan dengan mudah, termasuk lebar tetap tiga lajur. Di sini kita diberi keperluan baru lajur tengah perlu berada di antara lajur kiri dan lajur kanan Bahagian tengah lajur kanan menyesuaikan secara automatik mengikut perubahan jarak antara lajur kiri dan kanan. Ini mengemukakan keperluan baharu untuk reka letak, dan ia tidak boleh dicapai hanya dengan menggunakan atribut apungan dan atribut peratusan pada masa ini tidak menyokong pengiraan peratusan yang cukup tepat untuk mengambil kira ruang yang diduduki oleh lajur kiri dan kanan % digunakan untuk lajur tengah Untuk lebar, ia akan menggunakan lebar tetingkap penyemak imbas dan bukannya jarak tengah antara lajur kiri dan lajur kanan, jadi kita perlu memikirkan semula isu ini.

Kedudukan mutlak
Sebelum memulakan reka letak tiga lajur sedemikian, anda perlu memahami kaedah penentududukan baharu - penentududukan mutlak. Kaedah penentududukan terapung yang terdahulu terutamanya membolehkan penyemak imbas melaraskan arah terapung secara automatik mengikut kandungan objek Walau bagaimanapun, apabila kaedah ini tidak dapat memenuhi keperluan kedudukan, kaedah baharu diperlukan untuk mencapainya . Kaedah penentududukan ialah penentududukan mutlak, yang dicapai menggunakan atribut kedudukan.

kedudukan Digunakan untuk menetapkan kaedah kedudukan objek Nilai yang tersedia: statik/mutlak/relatif

Untuk setiap objek dalam halaman, atribut kedudukan lalai adalah statik.
Jika objek ditetapkan kepada position:absolute, objek akan diposisikan semula mengikut kedudukan keseluruhan halaman Apabila menggunakan atribut ini, anda boleh menggunakan atas, kanan, bawah, kiri, iaitu nilai jarak ​Dalam empat arah atas, kanan, bawah dan kiri Untuk menentukan kedudukan objek tertentu, lihat CSS berikut:

#layout {
position:absolute atas:20px;
kiri: 0px;
}
jika# Apabila reka letak menggunakan position:absolute;, ia akan menjadi mod kedudukan mutlak akan sentiasa berada 20px dari bahagian atas tetingkap penyemak imbas, dan kiri:0px akan memastikan ia berada jauh dari margin kiri penyemak imbas.

Nota: Jika objek ditetapkan kepada kedudukan:mutlak, ia pada asasnya akan dipisahkan daripada objek lain rasa, selepas menggunakan kedudukan mutlak, objek terapung di halaman web seperti lapisan.

Selepas objek diletakkan secara mutlak, hubungan terapungnya dengan halaman tidak akan dipertimbangkan lagi Anda hanya perlu menetapkan nilai arah atas, kanan, bawah dan kiri objek.

Dalam kes ini, menggunakan kedudukan mutlak boleh menyelesaikan masalah yang kami bangkitkan dengan baik. Begitu juga, gunakan 3 div untuk membentuk tiga struktur lajur kami: