CSS: two-column ​

div[class~="instui-two-column"] — Երկու սյունանոց դասավորություն՝ ձախ և աջ բովանդակային շրջաններով.

✅ Օգտագործել Երկու սյուները երբ՝

  • Ունեք երկու բովանդակային տարածք, որոնք մոտավորապես նույնքան կարևոր են

  • Երկու բովանդակության հավաքածուները կողք-կողքի համեմատելու կամ հակադրելու համար

  • Ստեղծում եք պատասխանատու դասավորություն, որի սյուները մոբայլում հերթով դասավորվում են 🚫 Մի օգտագործեք Երկու սյուները երբ՝

  • Մեկ սյունը գերիշխում է էջում — փոխարենը կիրառեք անասիմետրիկ դասավորություն

  • Բովանդակությունը չի շահում կողք-կողքի ներկայացումից

Մուտքականություն ​

  • Հավաստիացրեք, որ երկու սյուներն էլ տեսանելի և օգտագործելի են նեղ դիտման սարքերում
  • Օգտագործեք սեմանտիկ նշաններ (օր. <section>) սյունային բովանդակությունը շրջափակելու համար
  • Պահեք բավարար տարածություն և հակադրություն սյուների միջև

Օգտագործում ​

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

Օրինակներ ​

Մասեր ​

ՄասՆկարագիր
.instui-dividerԸնտրովի տեսողական բաժանարար սյուների միջև.
.instui-leftՁախ սյան բովանդակային տարածք.
.instui-rightԱջ սյան բովանդակային տարածք.

Փոփոխական վիճակներ ​

ՎիճակՆկարագիր
:optional—

Պայմաններ ​

ՏիպՀարցումՆկարագիր
media(max-width: 768px)—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--instui-color-border——
--instui-space-large——
--instui-space-medium——

Ավելին կապված ​