Wie kann ich eine zentrierte einzelne Grenze zwischen Spalten haben?

Question

Ich versuche, den Effekt zu bekommen, wo Sie eine einzelne Zeile zwischen den Spalten mit einem Raster haben (foundation). Bitte beachten Sie diese pen für extra Klarheit.

Ich versuche, diese

Aber der Abstand zwischen den Spalten zu erstellen erlaubt mir nicht, dies zu tun, indem einfach ein border-right zum Beispiel. Ich möchte den Abstand aus reaktionsfähigen Gründen lieber nicht entfernen.

Ich am Ende nur mit einer Grenze.

Was ist der beste Weg, dies zu erreichen?

Answer 1

Sie können dies erreichen, indem Sie zuerst die Polsterung entfernen, die in Ihrem .columns divs ist. Dies ermöglicht es allen Divs, direkt nebeneinander zu sein. Wenden Sie dann den Rahmen an der oberen und rechten Seite Ihres .columns an. Fügen Sie schließlich einen :last-child Selektor hinzu und entfernen Sie den rechten Rahmen.

Ergebnis

SCSS

.columns { 
    padding: 0px; 
    border-top: 1px solid gray; 
    border-right: 1px solid gray; 
    .wrap { 
    padding: 5px; 
    p { 
     font-size: 12px; 
    } 
    } 
    &:last-child { 
    border-right: 0px; 
    } 
} 

JSFiddle

Answer 2

Sie können gefälschte es durch Grenzen mit pseudo-Verput Schaffung ts.

.wrap {position:relative;} 
.row > .columns:not(:last-child) > .wrap:after { 
    content:""; 
    position:absolute; 
    right:-16px; /* ~30px gutters */ 
    top:0; 
    bottom:0; 
    width:1px; 
    background:blue; 
} 

http://codepen.io/anon/pen/jAzKEy

Das wird funktionieren, wenn Ihre Artikel alle gleich hoch sind. Wenn nicht, müssen Sie möglicherweise Pseudo-Elemente für ein Vorgängerelement verwenden, aber die Idee ist ähnlich.