Skip to content

CSS: two-column

div[class~="instui-two-column"] — Tví dálka uppsetning með vinstri og hægri efnissvæðum.

✅ Notaðu Two-Column þegar:

  • Þú átt tvö efnissvæði sem eru að mestu jafn mikilvæg

  • Til að bera saman eða greina á milli tveggja efnisröða hlið við hlið

  • Þegar þú byggir svörunaraðlagaða uppsetningu sem raðar dálkum ofan á hvor annan í farsímum 🚫 Notaðu ekki Two-Column þegar:

  • Annar dálkur stjórnar síðu — notaðu ósamhverfa uppsetningu í staðinn

  • Efnið nýtist ekki af því að vera sýnt hlið við hlið

Aðgengi

  • Gakktu úr skugga um að báðir dálkar séu skynjanlegir og nothæfir á þröngum skjástærðum
  • Notaðu merkingarlegar landamerkjur (t.d., <section>) til að umlykja dálkaefni
  • Viðhalda nægjanlegu rými og andstæðum milli dálka

Notkun

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

Hlutar

HlutiLýsing
.instui-dividerValfrjáls sjónrænn skilari milli dálka.
.instui-leftInnihald vinstri dálks.
.instui-rightInnihald hægri dálks.

Stöður

StaðaLýsing
:optional

Skilyrði

TegundFyrirspurnLýsing
media(max-width: 768px)

Notuð tákn

TokenTegundGildi
--instui-color-border
--instui-space-large
--instui-space-medium

Tengdar