Dengan menggunakan metode penentuan posisi mengambang, lebar tetap dan adaptasi dari satu kolom ke beberapa kolom pada dasarnya dapat diselesaikan dengan mudah, termasuk lebar tetap tiga kolom. Di sini kita diberikan persyaratan baru, berharap memiliki tata letak tiga kolom, dimana kolom kiri memerlukan lebar tetap dan ditampilkan di kiri, kolom kanan memerlukan lebar tetap dan ditampilkan di kanan, dan kolom tengah kolom harus berada di antara kolom kiri dan kanan. Bagian tengah kolom secara otomatis menyesuaikan dengan perubahan jarak antara kolom kiri dan kanan.
Hal ini mengedepankan persyaratan baru untuk tata letak, dan tidak dapat dicapai hanya dengan menggunakan atribut float dan atribut persentase. CSS saat ini tidak mendukung penghitungan persentase yang cukup akurat untuk memperhitungkan ruang yang ditempati oleh kolom kiri dan kanan gunakan 100% untuk kolom tengah. Untuk lebar, ini akan menggunakan lebar jendela browser, bukan jarak tengah antara kolom kiri dan kolom kanan, jadi kita perlu memikirkan kembali masalah ini.
penentuan posisi mutlak
Sebelum memulai tata letak tiga kolom seperti itu, perlu dipahami metode penentuan posisi baru-penentuan posisi absolut. Metode floating positioning sebelumnya terutama memungkinkan browser untuk secara otomatis menyesuaikan arah floating sesuai dengan konten objek. Namun, ketika metode ini tidak dapat memenuhi persyaratan positioning, diperlukan metode baru untuk mencapainya . Metode penentuan posisi adalah penentuan posisi absolut, yang dicapai dengan menggunakan atribut posisi.
position digunakan untuk mengatur metode penentuan posisi objek. Nilai yang tersedia: statis/mutlak/relatif
Untuk setiap objek di halaman, properti posisi default adalah statis. Jika Anda menyetel objek ke position:absolute, objek tersebut akan keluar dari aliran dokumen dan diposisikan ulang sesuai dengan posisinya di seluruh halaman. Saat menggunakan atribut ini, Anda dapat menggunakan atas, kanan, bawah, kiri, yaitu nilai jarak dalam empat arah atas, kanan, bawah, dan kiri, untuk menentukan posisi spesifik objek. Lihat berikut ini CSS:
#tata letak {
posisi:mutlak;
atas:20 piksel;
kiri:0 piksel;
}
Jika #layout menggunakan position:absolute;, maka akan menjadi mode pemosisian absolut. Pada saat yang sama, saat menyetel top:20px;, jaraknya akan selalu 20px dari bagian atas jendela browser, sedangkan left:0px akan memastikan yang jauh dari bagian atas jendela browser. Margin kiri browser adalah 0px. .
Catatan: Jika suatu objek disetel ke position:absolute; maka pada dasarnya akan terpisah dari objek lain. Mode pemosisiannya tidak akan memengaruhi objek lain, juga tidak akan terpengaruh oleh posisi mengambang objek lain, setelah menggunakan absolut positioning, objek mengapung di halaman web seperti lapisan.
Setelah objek benar-benar diposisikan, hubungan mengambangnya dengan halaman tidak lagi dipertimbangkan. Anda hanya perlu mengatur nilai arah atas, kanan, bawah, dan kiri objek.
Dalam hal ini, penggunaan absolute positioning dapat menyelesaikan masalah yang kita ajukan dengan baik. Demikian pula, gunakan 3 div untuk membentuk struktur tiga kolom:
#kiri {
warna latar belakang: #E8F5FE;
batas: 1 piksel padat #A9C9E2;
tinggi: 400 piksel;
lebar: 200 piksel;
posisi: mutlak;
atas: 0 piksel;
kiri: 0 piksel;
}
#Kanan {
warna latar belakang: #FFE7F4;
batas: 1 piksel padat #F9B3D5;
tinggi: 400 piksel;
lebar: 200 piksel;
posisi: mutlak;
atas: 0 piksel;
kanan: 0 piksel;
}
Dengan cara ini kolom kiri akan ditampilkan dekat tepi kiri dengan kiri: 0px;, sedangkan kolom kanan akan ditampilkan dengan kanan: 0px sehingga kolom kanan akan ditampilkan dari kanan, dan #center in bagian tengah akan menggunakan gaya CSS biasa:
#tengah {
warna latar belakang: #F2FDDB;
batas: 1 piksel padat #A5CF3D;
tinggi: 400 piksel;
margin-kanan: 202 piksel;
margin-kiri: 202px;
}
Untuk #center, kita tidak perlu mengatur metode mengambangnya. Kita hanya perlu membiarkannya memiliki margin kiri dan selalu mempertahankan lebar #lef dan #right. Ini mencapai lebar adaptif 202px di kedua sisi, dan sisi kiri dan kanan memiliki lebar adaptif 202 piksel. Jaraknya hanya memungkinkan #kiri dan #kanan ditampilkan di ruang ini, sehingga memenuhi persyaratan.