Да би се колоне разликовале, можете додати вертикалну линију између сваке колоне. Линија се налази у средишту празнине колоне. Ако сте икада стилизовали border
, онда сте спремни за стил column-rule
.
.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )
Имовина је скраћеница за column-rule-width
, column-rule-style
и column-rule-color
, што је исто као и образац border
и прихвата исте вредности.
-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;
column-rule-width
може бити дужина као 3px
или вредност кључне речи thin
.
column-rule-style
може бити било који од border-style
вредности, као што су solid
, dotted
, и dashed
.
column-rule-color
може бити било која вредност боје.
За разлику од тога column-gap
, column-rule
не заузима простор. Ако column-rule-width
је дебљи од column-gap
тада, правило ће се проширити испод ступаца.
Вертикално правило ће постојати само између колона које садрже садржај.
Подршка прегледача
Подршка за распоред више колона:
Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
---|---|---|---|---|---|---|
Било који | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Не заборавите на своје префиксе!