Css 如何在div之间应用垂直分隔符

我想在视图中应用垂直分隔符。
我已经这样做了：（请参阅完整展开视图中的代码片段）

。网格分割器{
位置：相对位置；
填充：0；
}
.grid divider>[class*='col-']{
位置：静态；
}
.grid divider>[class*='col-md-4']：第n个子项（n+1）：之前{
内容：“；
左边框：1px实心#DDD；
位置：绝对位置；
排名：0；
底部：0；
}
.col padding{
填充：0 15px；
}

普雷维森内尔酒店
预算材料
普雷维森内尔酒店
预算材料
普雷维森内尔酒店
预算材料

遵循以下css：

.grid-divider>[class*='col-'] {
     position: relative;
 }
.grid-divider>[class*='col-md-4']:nth-child(n+1):before {
    content: "";
    border-left: 1px solid #DDD;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
 }

---

在这里似乎可以工作：您需要2个垂直分隔符或3个？顺便说一句，每个页面应该只有一个

h1

元素。为什么要使用

.grid divider>[class*='col-']{position:static；}

？如果要将这些元素作为绝对定位的参考点，则必须对它们进行定位（这意味着除了静态之外的任何东西）。他为什么要使用这种方法？将

左边框

应用于

.col-md-4

，也可以实现同样的效果？