Svojstvo column-rule

Svojstvo column-rule zadaje granicu između kolona u višekolonskom tekstu. Po prihvaćenim vrednostima poklapa se sa svojstvom border.

Primer . Tip solid

U ovom primeru tekst će se podeliti na 3 kolone sa granicama između kolona u vidu pune linije debljine 1px (rastojanje između stubova će se formirati automatski, pošto je zadat column-gap u vrednosti normal):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

Primer . Uticaj column-gap

U ovom primeru tekst će se podeliti na 3 kolone sa razmakom između njih od 50px. Granica će pritom proći po sredini razmaka (desno i levo od granice biće po 25px):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Pogledajte takođe