Skip to content

CSS: two-column

div[class~="instui-two-column"] — Susun atur dua lajur dengan kawasan kandungan kiri dan kanan.

✅ Gunakan Two-Column apabila:

  • Anda mempunyai dua kawasan kandungan yang lebih kurang sama penting

  • Membandingkan atau membezakan dua set kandungan secara sebelah-menyebelah

  • Membina susun atur responsif yang tersusun bertindih pada peranti mudah alih 🚫 Jangan gunakan Two-Column apabila:

  • Satu lajur menguasai halaman — gunakan susun atur tak simetri sebaliknya

  • Kandungan tidak mendapat manfaat daripada pembentangan sebelah-menyebelah

Aksesibiliti

  • Pastikan kedua-dua lajur dapat dikesan dan digunakan pada paparan sempit
  • Gunakan penanda semantik (contohnya, <section>) untuk membungkus kandungan lajur
  • Kekalkan ruang dan kontras yang mencukupi antara lajur

Penggunaan

css
@import "@pantoken/plugin-layouts/layouts.css";

Bahagian

BahagianPenerangan
.instui-dividerPemisah visual pilihan antara lajur.
.instui-leftKawasan kandungan lajur kiri.
.instui-rightKawasan kandungan lajur kanan.

Keadaan

KeadaanPenerangan
:optional

Syarat

JenisPertanyaanPenerangan
media(max-width: 768px)

Token digunakan

TokenJenisNilai
--instui-color-border
--instui-space-large
--instui-space-medium

Berkaitan