Колона-правило - ЦСС-трикови

Преглед садржаја

Да би се колоне разликовале, можете додати вертикалну линију између сваке колоне. Линија се налази у средишту празнине колоне. Ако сте икада стилизовали 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+

Не заборавите на своје префиксе!

Занимљиви Чланци...