S CSS3 lahko kreiramo besedilo v stolpce, kot je npr. postavljeno v časopisih. Za postavitev besedila v stolpce uporabimo naslednje lastnosti:
Določitev števila stolpcev: column-count
Lastnost column-count
razdeli odstavek besedila v stolpce, vrednost lastnosti je število, ki pove v koliko stolpcev naj se besedilo razdeli. Ta lastnost je v brskalnikih še slabo podprta, zato za pravilen prikaz uporabimo za brskalnike Chrome, Safari in Opero predpono -webkit-
, za brskalnik Firefox pa -moz-
. V IE je lastnost podprta od verzije 10.0 naprej.
<div id="column">Lorem ipsum dolor sit amet, consectetur... </div>
#column { -webkit-column-count: 3 } /* Chrome, Opera, Safari */
#column { -moz-column-count: 3 } /* Firefox */
#column { column-count: 3 }
Določitev razmika med stolpci: column-gap
Lastnost column-gap
določa razmik med stolpci besedila. Tudi ta lastnost je v brskalnikih še slabo podprta, zato uporabimo tudi predponi -webkit-
in -moz-
.
<div id="column">Lorem ipsum dolor sit amet, consectetur... </div>
#column { -webkit-column-count: 3 } /* Chrome, Opera, Safari */
#column { -moz-column-count: 3 } /* Firefox */
#column { column-count: 3 }
#column { -webkit-column-gap: 30px } /* Chrome, Opera, Safari */
#column { -moz-column-gap: 30px } /* Firefox */
#column { column-gap: 30px }
Določitev vodilne črte med stolpci: column-rule
Lastnost column-rule
določa in oblikuje vodilno črto med stolpci. Tudi ta lastnost je v brskalnikih še slabo podprta, zato uporabimo tudi predponi -webkit-
in -moz-
.
<div id="column">Lorem ipsum dolor sit amet, consectetur... </div>
#column { -webkit-column-count: 3 } /* Chrome, Opera, Safari */
#column { -moz-column-count: 3 } /* Firefox */
#column { column-count: 3 }
#column { -webkit-column-gap: 30px } /* Chrome, Opera, Safari */
#column { -moz-column-gap: 30px } /* Firefox */
#column { column-gap: 30px }
#column { -webkit-column-rule: 2px solid gray } /* Chrome, Opera, Safari */
#column { -moz-column-rule: 2px solid gray } /* Firefox */
#column { column-rule: 2px solid gray }