Source : Add vertical dividers with CSS | Simulation JSFiddle
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="fat-menu"> <div class="first-column"> ..content.. </div> <div class="column"> ..content.. </div> <div class="column"> ..content.. </div> <div style="clear:both;"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#fat-menu { /* Set position so that offsets in children are based on parent */ position: relative; } .first-column, .column { float:left; width:200px; } .column { margin-left:30px; } .column:before { content:" "; margin:0 -15px; position: absolute; top: 0; bottom: 0; width: 1px; background: #666666; } |
Petite subtilité avec la grille Bootstrap
Les classes .col-* ont déjà la propriété position avec la valeur relative. Il faudra la surcharger avec la valeur initial.
|
1 2 3 4 5 6 |
<div class="footer-nav-columns"> <div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3"> <div class="col-xs-12 col-sm-3"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.footer-nav-columns{ position: relative; padding: $grid-gutter-width 0; .col-xs-12{ position: initial; &:not(:first-of-type):before{ content: " "; margin: 0 -$grid-gutter-width / 2; position: absolute; top: 50px; bottom: 50px; width: 1px; background-color: $site-border-color; } } } |
Autre technique en utilisant une image et les backgrounds multiples de CSS3
Pour, par exemple, 3 colonnes :
|
1 2 3 4 5 |
.mon-element{ background: url(/media/themes/responsive/pixel.gif) repeat-y 33.33333% 0, url(/media/themes/responsive/pixel.gif) repeat-y 66.66666% 0; } |