Menggunakan posisi mengambang, lebar tetap dan kemampuan beradaptasi dari satu kolom ke beberapa kolom pada dasarnya dapat diselesaikan secara sederhana, termasuk lebar tetap dari tiga kolom. Di sini kami telah mengajukan persyaratan baru, berharap memiliki tata letak tiga kolom, di mana kolom kiri membutuhkan lebar tetap dan ditampilkan di sebelah kiri, kolom kanan membutuhkan lebar tetap dan ditampilkan di sebelah kanan, dan tengah Kolom harus berada di kolom kiri dan kolom kanan. Ini mengedepankan persyaratan baru untuk tata letak, dan hanya menggunakan atribut float dan atribut persentase tidak dapat dicapai Digunakan untuk kolom tengah untuk lebar, itu akan menggunakan lebar jendela browser, daripada jarak tengah antara kolom kiri dan kanan, jadi kita perlu memikirkan kembali masalah ini. #layout { Jika #Layout menggunakan posisi absolut; margin kiri adalah 0px. . Dengan cara ini, kolom kiri akan ditampilkan di sisi kiri tepi kiri, sedangkan kolom kanan akan ditampilkan di sisi kanan oleh kanan: 0px; dan #Center di tengah akan menggunakan gaya CSS normal: Untuk #Center, kita tidak perlu lagi mengatur metode mengambangnya. Jarak sisi kiri dan kanan hanya memungkinkan #Left dan #Right ditampilkan di ruang ini, sehingga mencapai persyaratan.
Posisi absolut
Sebelum memulai tata letak tiga kolom seperti itu, perlu untuk memahami metode penentuan posisi baru - penentuan posisi absolut. Metode penentuan posisi mengambang sebelumnya secara otomatis disesuaikan oleh browser sesuai dengan konten objek. penentuan posisi, dan posisi absolut dicapai dengan menggunakan atribut posisi.
Posisi yang digunakan untuk mengatur nilai yang tersedia untuk memposisikan objek: statis/absolut/relatif
Untuk setiap objek di halaman, properti posisi default statis. Jika Anda mengatur objek ke posisi: Absolute, objek akan dipisahkan dari aliran dokumen dan diposisikan ulang sesuai dengan lokasi seluruh halaman. Saat menggunakan properti ini, Anda dapat menggunakan atas, kanan, bawah, kiri, yaitu nilai jarak dari empat arah dari atas, kanan, bawah dan kiri untuk menentukan posisi spesifik objek.
Posisi: Absolute;
Atas: 20px;
Kiri: 0px;
}
CATATAN: Suatu objek diatur ke posisi: Absolute; Posisi absolut, objek mengapung di halaman web seperti lapisan.
Setelah benar -benar memposisikan, objek tidak akan lagi dipertimbangkan dengan hubungan mengambang di halaman.
Dalam hal ini, menggunakan posisi absolut dapat menyelesaikan masalah yang kami angkat dengan baik. Demikian pula, kami menggunakan 3 Divs untuk membentuk tiga struktur kolom kami:
#kiri {
latar belakang-warna: #e8f5fe;
Perbatasan: 1px solid #a9c9e2;
Tinggi: 400px;
Lebar: 200px;
Posisi: Absolute;
Atas: 0px;
Kiri: 0px;
}
#Kanan {
latar belakang-warna: #ffe7f4;
Perbatasan: 1px Solid #F9B3D5;
Tinggi: 400px;
Lebar: 200px;
Posisi: Absolute;
Atas: 0px;
Kanan: 0px;
}
#tengah {
latar belakang-warna: #f2fddb;
Perbatasan: 1px Solid #A5CF3D;
Tinggi: 400px;
margin-kanan: 202px;
margin-kiri: 202px;
}