Tata letak setengah kiri dan kanan – banyak cara berbeda – Beragampengetahuan

Bertahun-tahun yang lalu kami menerbitkan ide ini di beragampengetahuan. Kami pikir sudah waktunya untuk memperbarui ini dan bersikap adil terhadap subjek ini.

Bayangkan sebuah skenario di mana Anda perlu membagi tata letak Anda menjadi dua. Konten di sebelah kiri dan konten di sebelah kanan. Pada dasarnya, Anda memerlukan dua kolom dengan tinggi yang sama di dalam wadah. Masing-masing sisi menempati tepat setengah dari wadah, menciptakan pemisahan yang jelas antara sisi-sisinya. Seperti banyak hal di CSS, ada banyak cara untuk melakukan hal ini, banyak di antaranya akan kita bahas sekarang!

Pembaruan (25 Oktober 2024): Menambahkan contoh penggunaan pemosisian jangkar CSS.

Gunakan gradien latar belakang

Cara mudah untuk membuat tampilan latar belakang yang selalu berubah adalah dengan menggunakan gradien. Separuh latar belakang disetel ke satu warna dan separuh lainnya disetel ke warna lain. Perhentian warna tanpa spasi diatur di tengah, bukan memudar dari satu warna ke warna lainnya.

.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}

Ini berfungsi untuk satu elemen kontainer. Namun, ini juga berarti bahwa jika konten perlu memenuhi sisi wadah, konten tersebut perlu menggunakan pelampung atau mungkin metode tata letak lainnya.

Gunakan posisi absolut

Pendekatan lain mungkin dengan menyiapkan dua kontainer di dalam kontainer induk, memposisikannya secara absolut, membaginya menjadi dua menggunakan persentase, dan kemudian menerapkan latar belakang. Keuntungannya adalah sekarang kami memiliki dua wadah independen yang dapat menampung kontennya sendiri.

Terkadang penentuan posisi absolut adalah solusi sempurna, dan terkadang tidak dapat dipertahankan. Penampung induk di sini perlu memiliki ketinggian yang disetel, dan menyetel ketinggian biasanya merupakan berita buruk bagi konten (konten berubah!). Belum lagi elemen yang diposisikan secara mutlak berada di luar alur dokumen. Jadi sulit untuk membuatnya berfungsi sambil mendorong konten lain di bawahnya.

Gunakan tabel (palsu).

Ya, ya, tabelnya terlalu kuno (belum lagi penuh dengan masalah aksesibilitas dan ketidakfleksibelan tata letak). Ya, gunakan display: table-cell; Properti sebenarnya adalah cara mudah untuk membuat tata letak ini tanpa harus menulis markup tabel dalam HTML. Singkatnya, kita mengubah wadah induk semantik menjadi sebuah tabel, dan kemudian mengubah wadah anak menjadi sel dalam tabel – semuanya dalam CSS!

Anda bahkan dapat dengan mudah mengubah properti tampilan pada breakpoint di sini untuk membuat sisi-sisinya bertumpuk pada layar yang lebih kecil. display: table; (dan teman-teman) didukung sejak IE 8 dan bahkan versi Android yang lebih lama, jadi sangat aman!

Gunakan pelampung

kita bisa memanfaatkan teman baik kita float Susun wadah secara berdampingan. Manfaatnya di sini adalah menghindari penentuan posisi absolut (yang, seperti telah kami tunjukkan, dapat membingungkan).

Dalam contoh ini, kami mengatur ketinggian secara eksplisit agar menjadi rata. Namun secara default, Anda tidak benar-benar mendapatkan kemampuan untuk mengapung. Anda dapat menggunakan trik gradien latar belakang yang telah kami bahas agar berhasil Lihat bahkan. Atau lihat trik margin negatif yang aneh atau semacamnya.

Selain itu, perlu diingat bahwa Anda mungkin perlu menghapus float pada elemen induk agar dokumen tetap mengalir dengan lancar.

Gunakan blok sebaris

Jika membersihkan elemen melayang tampak seperti beban, gunakanlah display: inline-block adalah pilihan lain. Triknya di sini adalah memastikan tidak ada jeda atau spasi antar elemen di setiap sisi HTML. Jika tidak, ruang tersebut akan dianggap sebagai ruang literal dan bagian kedua akan pecah dan rontok.

Sekali lagi, blok sejajar tidak memiliki apa pun untuk membantu kita menyamakan tinggi sisinya, jadi Anda harus memperjelasnya.

Ada cara lain yang mungkin untuk mengatasi masalah jarak di atas.

Gunakan kotak fleksibel

Flexbox adalah pendekatan yang bagus, tetapi perlu diketahui bahwa ini terbatas pada IE 10 ke atas dan Anda mungkin perlu mengetahui awalan dan nilai untuk dukungan terbaik.

Dengan menggunakan pendekatan ini, kami mengubah wadah induk menjadi kotak fleksibel, dengan wadah anak menempati bagian ruang yang sama. Tidak perlu mengatur lebar atau tinggi! Flexbox hanya mengetahui apa yang harus dilakukan karena pengaturan default telah diatur dengan sempurna untuk itu. Misalnya, flex-direction: row; Dan align-items: stretch; adalah yang kita inginkan, tapi ini adalah nilai default jadi kita tidak perlu mengaturnya. Untuk memastikannya rata, atur flex: 1; Sisi ini adalah rencana yang bagus. Hal ini memaksa mereka untuk menempati ruang yang sama.

Dalam demo ini kami juga membuat wadah fleksibel samping, hanya untuk bersenang-senang, untuk menangani pemusatan vertikal dan horizontal.

Gunakan tata letak grid

Bagi mereka yang hidup di garis depan, teknologi tata letak grid CSS seperti metode Flexbox dan Tabel yang digabungkan menjadi satu. Dengan kata lain, tentukan wadah lalu bagi menjadi kolom dan sel yang dapat diisi secara fleksibel dengan elemen turunan.

Penempatan jangkar CSS

Fitur ini mulai diluncurkan pada tahun 2024, dan kami masih menunggu dukungan browser penuh. Namun kita dapat menggunakan penahan CSS untuk “melampirkan” satu elemen ke elemen lainnya – meskipun kedua elemen tersebut sama sekali tidak terkait dalam markup.

Idenya adalah kita memiliki satu elemen yang terdaftar sebagai “jangkar” dan elemen lain yang menjadi “target” dari jangkar tersebut. Sepertinya elemen target dipasang pada titik jangkar. Kita dapat mengontrol di mana kita menyematkannya!

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
}

Ini menetapkan a .anchor dan menjalin hubungan dengan a .target elemen. Dari sini, kita dapat mengetahui di sisi mana titik jangkar target harus ditambatkan.

.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
  left: anchor(right);
}

Keren kan kalau ada banyak cara untuk melakukan ini di CSS?

Tata Letak Setengah Kiri dan Kanan – Banyak Cara Berbeda Awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.