两个 div 之间的分隔线

Question

我正在尝试在 div/列之间实现分隔线，如下图所示。我尝试过应用带有 padding 和 margin 的边框，但这些都不起作用。我想知道实现这一目标的最佳方法是什么？

小提琴：

http://jsfiddle.net/Lr5d096n/1/

html

<div class="container-col">
    <div></div>
<div class="column-center">
    <div class="top-div">
        <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
     </div>
    <div class="bottom-div">
        <h5>headline</h5>
                <div class="game-table">
        <div class="game-item">
            <div class="game-home">home Team</div>
            <div class="game-vs">Vs.</div>
            <div class="game-away">away team</div>
        </div>
        </div>
        Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...
    </div>

</div>
<div class="column-left">
        <div class="top-div">
        <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
        <h5>headline</h5>
                <div class="game-table">
        <div class="game-item">
            <div class="game-home">home Team</div>
            <div class="game-vs">Vs.</div>
            <div class="game-away">away team</div>
        </div>
        </div>
        Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...
    </div>
    </div>
<div class="column-right">

        <div class="top-div">
        <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
        <h5>headline</h5>
        <div class="game-table">
        <div class="game-item">
            <div class="game-home">home Team</div>
            <div class="game-vs">Vs.</div>
            <div class="game-away">away team</div>
        </div>
        </div>
        Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...
    </div>
    </div>
</div>

css

.container-col { 高度：自动；显示：表格；边距底部：20px;}

.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;

}

Answer 1

为了实现这一点，我在.center元素上使用了border-left和border-right，我还整理了.column-left、.column-right和column-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 {
  height: auto;
  display: table;
  margin-bottom: 20px;
}
.column-left,
.column-right,
.column-center {
  width: 33.333333%;
  height: auto;
  box-sizing: border-box;
  padding: 0 0.5em 20px 0.5em;
  border: 1px solid transparent;
}
.column-left {
  float: left;
}
.column-right {
  float: right;
}
.column-center {
  display: inline-block;
  border-left-color: #aaa;
  border-right-color: #aaa;
}
.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;
}

<br>
<div class="container-col">
  <div></div>
  <div class="column-center">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
  <div class="column-left">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
  <div class="column-right">
    <div class="top-div">
      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>
    </div>
    <div class="bottom-div">
      <h5>headline</h5>

      <div class="game-table">
        <div class="game-item">
          <div class="game-home">home Team</div>
          <div class="game-vs">Vs.</div>
          <div class="game-away">away team</div>
        </div>
      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>
  </div>
</div>

参考资料：

• box-sizing (MDN)。
• box-sizing specification (W3C)。