如何在列之間有一個居中的單邊界？

我試圖獲得使用網格的列之間有單行的位置的效果（foundation）。請參閱此pen以獲得更加清晰的效果。如何在列之間有一個居中的單邊界？

我試圖創建此

但列之間的間距不允許我簡單地使用例如border-right做到這一點。出於響應的原因，我寧願不刪除間距。

我最終只使用邊框。

實現此目的的最佳方法是什麼？

來源

2016-07-21 ProEvilz

只是爲了澄清一下，你是否想要在左側，右側和底部有一個邊框？或者你想要那些被刪除？我無法分辨你的圖像是否被切斷，或者你是否想要這樣。 –

是的，我希望它與圖像完全一樣，但不會刪除'.column'上的填充影響響應性，因爲它在默認情況下存在？ '.text-center'只應用一個'text-align：center'。 – ProEvilz

你爲什麼要刪除你的答案？ – ProEvilz

您可以通過首先刪除.columns divs中的填充來實現此目的。這將允許所有div彼此相鄰。然後，將邊框應用於.columns的頂部和右側。最後，添加一個:last-child選擇器並刪除它的右邊框。

結果

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

來源

2016-07-21 15:22:41

你可以通過創建一個假的Elemen邊界假貨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

這會工作。如果沒有，你可能需要在祖先元素上使用僞元素，但這個想法是相似的。

來源

2016-07-21 17:50:01 andi

如何在列之間有一個居中的單邊界？

回答

相關問題