如何在div之间建立垂直线？

Question

我正试图在我的div之间建立一条垂直线。 我想我的线条适合div的整个高度，我无法做到这一点。 我已尝试过右边界，下边界的左边界。

这是我的结果

右边框

下一个div的border-left

有人可以告诉我实现这个目标的最佳方法吗？

提前致谢。

CODE

<style type="text/css">


 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}


.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  float: left;
  /*line-height: 114px;*/
}

.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline-block;
  padding: 5px 22px;
}


</style>


<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 sa-section"  >

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span id="sa-section-num" class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>


          <!-- Title -->
          <div class="col-xs-6 col-lg-6" style="border-left: 2px solid white;" >
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <!-- Answers -->
          <div class="sa-right-items text-center">
           <span class="sa-answer">
            <span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
           <span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
         </span>


          <!-- Review -->
         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <!-- Report -->
        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse"  class="pull-right">
            <img width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span> <span class="sa-h6">VIEW REPORT</span> </span>
          </span>
        </span>

      </div>
    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     Contents

   </div>
 </div>
</div>

</div>
</div>
</div>

JSFiddle

Answer 1

从.col-xs-6 col-lg-6删除边框样式，然后：

.col-xs-1 sa-section {
    border-right: 2px solid #fff;
    margin-top: -11px;
    padding-top: 11px;
}

基本上边框会显示在填充内，所以你只需要稍微移动容器（使用负边距顶部）并添加一些填充，以便文本显示在同一个地方。

您可能希望向容器添加ID并以CSS的方式将其作为目标，而不是定义类的样式。

JSFiddle

Answer 2

请检查小提琴 - http://jsfiddle.net/onms9kcu/3/

border内联样式已删除，并添加了以下样式。

.sa-section:after{
  border-right: 2px solid white;
  content: "";
  display: block;
  width: 1px;
  position: absolute;
  bottom: -10px;
  top: -10px;
  right: 0;
}