Di CSS, ada dua cara untuk mengimplementasikan tata letak kolom. Metode pertama adalah dengan menggunakan pemosisian absolut (absolute positioning) di antara empat opsi pemosisian CSS (mutlak, statis, relatif, dan tetap), yang dapat menghapus elemen dalam dokumen dari posisi aslinya dan memposisikannya kembali di mana pun Anda mau. Yang kedua adalah menggunakan konsep float di CSS.
Pemosisian absolut atau mengambang dapat digunakan untuk mencapai efek kolom. Keduanya dapat digunakan secara mandiri atau digabungkan untuk saling melengkapi.
1. Penentuan posisi absolut Keuntungan dari penentuan posisi absolut adalah kita dapat mengontrol posisi elemen apa pun dengan tepat - tidak perlu menebak-nebak atau beruntung. Karena elemen yang diposisikan secara mutlak dihapus seluruhnya dari aliran dokumen biasa tanpa meninggalkan jejak, maka tidak berdampak pada elemen lainnya.
Jadi mari kita coba cara mengimplementasikan tata letak berikut menggunakan pemosisian absolut.
Ini adalah tata letak tiga kolom dan berada di tengah. Diantaranya, kolom A merupakan kolom isi utama, dan kolom B dan C merupakan kolom samping. Pertama-tama kita tidak bisa langsung menggunakan absolute positioning untuk memposisikan ketiga kolom A, B, dan C ke posisi tengah, karena resolusi monitor tiap orang berbeda-beda. Efek centering dari positioning pada monitor dengan resolusi 1024X768 akan berbeda tidak berfungsi pada resolusi lain. Efek yang terlihat pada monitor berkecepatan tinggi pasti tidak akan terpusat.
Untungnya, terdapat fitur yang sangat berguna dalam model penentuan posisi absolut, yaitu: jika wadah elemen yang diposisikan secara absolut juga telah diposisikan, maka nilai atas dan kiri yang ditentukan oleh elemen tersebut tidak akan didasarkan pada elemen root. html dokumen (juga merupakan sudut kiri atas jendela browser), tetapi offset akan dihitung berdasarkan sudut kiri atas wadahnya. Dengan kata lain, yaitu: wadah yang diposisikan akan bertindak sebagai titik awal untuk penentuan posisi absolut seluruh elemen di dalamnya.
Oleh karena itu, dengan menggunakan fitur ini, kami menambahkan container D di luar kolom A, B, dan C, seperti yang ditunjukkan di bawah ini:
Kemudian, kita memusatkan wadah D dan menambahkan atribut ke dalamnya: position:relative. Dengan cara ini, kita menggunakan pemosisian absolut untuk memposisikan nilai atas dan kiri A, B, dan C. Posisi A, B , dan C akan didasarkan pada wadah D. Posisi sudut kiri atas dihitung, sehingga efek pemusatan tiga kolom yang diinginkan dapat dicapai.
Namun, tata letak yang biasa kita gunakan tidak sesederhana itu. Selain tiga kolom, kita juga memerlukan header dan footer, seperti gambar di bawah ini:
Saat ini, menggunakan tata letak yang diposisikan secara mutlak tidak akan berfungsi, karena elemen yang diposisikan secara mutlak akan dihapus seluruhnya dari aliran dokumen. Pada saat ini, footer akan berada di sebelah header dan ditampilkan di bawah header.
Jika kita harus menggunakan absolute positioning, kita harus mengetahui tinggi masing-masing ketiga kolom terlebih dahulu, kemudian memposisikan footer berdasarkan kolom tertinggi. Jika panjang teks di kolom mana pun tidak dapat ditentukan, selain menggunakan JavaScript, kita hanya dapat melepaskan gagasan pemosisian absolut dan sebagai gantinya berinvestasi dalam penerapan tata letak mengambang.
2. Mengambang
Maksud asli dari mengambang adalah untuk melayangkan gambar yang disisipkan pada artikel ke kiri atau ke kanan, sehingga teks di bawah gambar otomatis membungkusnya, sehingga tidak ada ruang kosong yang besar di kiri atau kanan. sisi kanan gambar.
Meskipun sintaksis floating sederhana, namun tidak mudah untuk dikuasai. Mari kita berikan contoh cara menggunakan floating to layout. Demikian pula, kita akan menerapkan tata letak tiga kolom dengan footer. Seperti yang ditunjukkan di bawah ini:
Bagaimana cara menggunakan float untuk mencapai efek seperti itu? Sebenarnya, caranya sangat sederhana:
1. Atur lebar E dan pusat E.
2. Atur lebar A, B, dan C, dan letakkan A, B, dan C masing-masing ke
kiri Atribut untuk footer Yang
perlu dijelaskan adalah, Tata letak mengambang masih mengikuti alur dokumen biasa, jadi dibandingkan dengan pemosisian absolut, posisi deklarasi elemen dalam file sumber HTML sangat penting saat pemosisian mengambang. Tentu saja, cara paling sederhana untuk mengatasi masalah ini adalah dengan menukar urutan deklarasi kolom kiri dan kolom kanan di file sumber. Ada juga cara untuk mencapai tata letak yang sama tanpa menukar urutan kolom penggunaan perbandingan Cara yang tidak jelas untuk menggunakan nilai margin negatif. Dalam keadaan normal, orang kemungkinan besar akan memilih untuk menukar urutan deklarasi di kolom kiri dan tengah file sumber.