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:

Salin kod Kodnya adalah seperti berikut:

#kiri {
warna latar: #E8F5FE;
jidar: 1px pepejal #A9C9E2;
lebar: 200px; ;
atas: 0px;
kiri:
}
#kanan {
sempadan: #FFE7F4; 4 00px ;
lebar: 200px; kedudukan
atas: 0px
kanan: 0px; lajur akan ditinggalkan dari kiri :0px akan dipaparkan pada tepi kiri, manakala lajur kanan akan dipaparkan oleh kanan: 0px supaya lajur kanan akan dipaparkan dari sebelah kanan, dan #center di tengah akan; gunakan gaya CSS biasa:





Salin kod

Kodnya adalah seperti berikut:


# tengah {

warna latar: #F2FDDB; jidar: 1px pepejal # A5CF3D; }
Untuk #center, kita tidak perlu menetapkan kaedah terapungnya. Kita hanya perlu membiarkannya mempunyai jidar kiri dan sentiasa mengekalkan lebar #kiri dan #kanan Ini mencapai lebar penyesuaian 202px pada kedua-dua belah , dan jidar kiri dan kanan ialah Jarak antara kedua-dua belah hanya cukup untuk #kiri dan #kanan untuk dipaparkan dalam ruang ini, sekali gus mencapai keperluan.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Tiga lajur kiri dan kanan lebar tetap adaptif tengah-AA25.CN</title> <style> body{ margin:0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 200px; position: absolute; top: 0px; left: 0px; } #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 202px; margin-left: 202px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 200px; position: absolute; top: 0px; right: 0px; } </style> <div id="left">Lajur kiri</div> <div id="center">Lajur tengah</div>