如何在列之间设置居中的单边框？

Question

我正在尝试使用网格（foundation）获得列之间单行的效果。为了更加清晰，请参阅此pen。

我正在努力创造这个

但是，列之间的间距不允许我通过简单地使用border-right来做到这一点。出于反应原因，我宁愿不删除间距。

我最后只使用边框。

实现这一目标的最佳方法是什么？

Answer 1

您可以先删除.columns div中的填充来实现此目的。这将允许所有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

Answer 2

您可以通过使用伪元素创建边框来伪造它。

.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

如果你的物品都高度相等，那就行了。如果没有，您可能需要在祖先元素上使用伪元素，但这个想法是相似的。