Mitu veergu - CSS-trikid | Koodijupid 2025

Siin on näide lihtsast kolme veeruga klassist:

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )

Millest rakendada sellist tekstiplokki:


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Näide

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in tärpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pange tähele, et iga veeru kõrgus on spetsifikatsiooni järgi automaatselt tasakaalustatud.

Pange tähele, et see demo- ja näidiskood kasutab mozi ja veebikomplekti tarnijate eesliiteid, peaks töötama ainult Gecko (Firefox 1.5+ jt) ja Webkiti (Safari 3+, Chrome jt) brauserites. Internet Exploreris ega Operas pole veel kohalikku tuge, millest ma tean.

Kõik seotud atribuudid

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : 20px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; )

Võite määrata ka column-width(koos eesliidetega), kuid üldiselt on mõttekam lasta sellel automaatselt arvutada.

Reegel (“reegel”, nagu ka joon) jagab lõhe keskelt alla. Võite kasutada samu väärtusi nagu te a border.

Hoolitse selle eest, et teie tekstiplokid ei oleks nii tohutult kõrged, et need oleksid (üsna väikesest) brauseriaknast pikemad, vastasel juhul on see sama probleem, kui tekst on brauseriaknast laiem (edasi-tagasi kerimine, et lugeda = nõme). Kaaluge katext-align: justify;