如何在列之间有一个居中的单边界？

我试图获得使用网格的列之间有单行的位置的效果（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

如何在列之间有一个居中的单边界？

回答

相关问题