Om kolommen te onderscheiden, kunt u een verticale lijn tussen elke kolom toevoegen. De lijn bevindt zich in het midden van de kolomopening. Als je ooit hebt gestyled border, ben je klaar om te stylen 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; )De eigenschap is afkorting voor column-rule-width, column-rule-styleen column-rule-color, wat hetzelfde patroon als borderen accepteert dezelfde waarden.
-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-widthkan een lengte hebben zoals 3pxof een trefwoordwaarde zoals thin.
column-rule-stylekan elk van zijn border-stylewaarden als solid, dotteden dashed.
column-rule-color kan elke kleurwaarde hebben.
In tegenstelling tot column-gap, column-ruleneemt geen ruimte in beslag. Als de column-rule-widthdikker is dan de, column-gapwordt de regel onder de kolommen uitgevouwen.
De verticale regel bestaat alleen tussen kolommen met inhoud.
Browser-ondersteuning
Ondersteuning voor lay-out met meerdere kolommen:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Vergeet uw voorvoegsels niet!