Html 两个div之间的分隔线

我试图在div/列之间实现一条分隔线，如下图所示。我尝试过用填充和边距来应用边框，但都不起作用。我想知道实现这一目标的最佳方式是什么

小提琴：

html

---

为了实现这一点，我在

.center

元素上使用了

border left

和

border right

，我还整理了

列left

、

列right

和

列center

元素的常见属性：

.column-left,
.column-right,
.column-center {
  width: 33.333333%;
  height: auto;
  /* causes the padding, and borders, to be included in the calculated
     width of the elements: */
  box-sizing: border-box;
  /* setting padding for the elements top, right, bottom, left: */
  padding: 0 0.5em 20px 0.5em;
  // setting the border for all elements: */
  border: 1px solid transparent;
}
.column-center {
  display: inline-block;
  /* overriding the transparent colour for the left and right borders: */
  border-left-color: #aaa;
  border-right-color: #aaa;
}

.container col{
高度：自动；
显示：表格；
边缘底部：20px；
}
.左栏，
.右栏，
.立柱中心{
宽度：33.333%；
高度：自动；
框大小：边框框；
填充：0.5em 20px 0.5em；
边框：1px实心透明；
}
.左栏{
浮动：左；
}
.右栏{
浮动：对；
}
.立柱中心{
显示：内联块；
左边框颜色：#aaa；
右边框颜色：#aaa；
}
.上分区{
高度：自动；
}
1.底部div{
线高：18px；
高度：自动；
}
.下分区h5{
边际上限：0px；
边缘底部：10px；
文本对齐：居中；
}
.上分区img{
宽度：100%；
高度：自动；
}
.游戏桌{
边框顶部：1个点#aaa；
边缘底部：10px；
}
.游戏项目{
填充：8px 0px；
边框底部：1px虚线#aaa；
高度：自动；
}
.游戏之家{
浮动：左；
宽度：44%；
保证金权利：2%；
文本对齐：右对齐；
}
.游戏vs{
宽度：8%；
保证金权利：2%；
显示：内联块；
文本对齐：居中；
}
.比赛结束{
浮动：对；
宽度：44%；
文本对齐：左对齐；
}

大字标题
主队
Vs。
客队
Nibh voluptua eleifend-sed-ne，前melius maiorum vix，ea案例专家席。在《剧本创作集》中，前南索奈·提奥弗拉斯托斯（nam sonet theophrastus）。阅读更多。。。
大字标题
主队
Vs。
客队
Nibh voluptua eleifend-sed-ne，前melius maiorum vix，ea案例专家席。在《剧本创作集》中，前南索奈·提奥弗拉斯托斯（nam sonet theophrastus）。阅读更多。。。
大字标题
主队
Vs。
客队
Nibh voluptua eleifend-sed-ne，前melius maiorum vix，ea案例专家席。在《剧本创作集》中，前南索奈·提奥弗拉斯托斯（nam sonet theophrastus）。阅读更多。。。

使用右边框可以实现这一点……试试这个。列中心{显示：内联块；宽度：32%；高度：自动；填充底部：20px；左边框：1px实心#cccccccc；右边框：1px实心#cccccccc；}您可以使用表格。或者，如果您不支持，请使用

框大小：边框框带边框（左/右）。是否可以在不移除分隔符的情况下移除左栏上的左填充和右栏上的右填充？当然应该，是的。如何从我仅应用填充时开始：0 0.5em 20px 0.5em；在中间的一栏中，他们的图片大小不同，填充不同，我明白你的意思；在这种情况下（经过一些实验之后），我会将我的回答改为：“是的，可能吧；但不容易。”而我还没有弄清楚怎么做。
.column-left{ float: left; width: 33.333%;  height: auto; padding-bottom: 20px; }
.column-right{ float: right; width: 33.333%; height: auto; padding-bottom: 20px; }
.column-center{ display: inline-block; width: 33.333%;  height: auto; padding-bottom: 20px; }

.top-div {

    height: auto;
}

.bottom-div {
  line-height: 18px;
    height:auto;
}

.bottom-div h5 {
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;

}

.top-div img {
    width:100%;
    height: auto;
}

.game-table {
border-top: 1px dotted #aaa;
margin-bottom: 10px;
}


.game-item {
    padding: 8px 0px;
    border-bottom: 1px dotted #aaa;
    height: auto;

}

.game-home {
 float: left;
    width: 44%;
    margin-right: 2%;
    text-align: right;
}

.game-vs {
    width: 8%;
    margin-right: 2%;
     display: inline-block;
    text-align: center;

}

.game-away {
    float: right;
   width: 44%;
    text-align: left;

}

.column-left,
.column-right,
.column-center {
  width: 33.333333%;
  height: auto;
  /* causes the padding, and borders, to be included in the calculated
     width of the elements: */
  box-sizing: border-box;
  /* setting padding for the elements top, right, bottom, left: */
  padding: 0 0.5em 20px 0.5em;
  // setting the border for all elements: */
  border: 1px solid transparent;
}
.column-center {
  display: inline-block;
  /* overriding the transparent colour for the left and right borders: */
  border-left-color: #aaa;
  border-right-color: #aaa;
}