CSS - Resize上空间之间的垂直分隔符

Question

我试图添加一个以空格为中心的垂直分隔符，位于＆lt; id_first＆＃39;之间。和＆＃39; id_second＆＃39;列。即使在窗口调整大小时，分隔符也必须保持两列之间的中心。

＆＃13;

＆＃13;

for (var i = 0; i < 20; i++) {
  $('#id_first').append('<div class=" boxd"> hi </div>');
}
for (var i = 0; i < 40; i++) {
  $('#id_second').append('<div class="btn-primary boxl"> hi </div>');
}

＆＃13;

.first {
  height: 100%;
  min-height: 100px
}
.second {
  height: 100%;
  min-height: 100px
}
.boxd {
  width: 120px;
  height: 120px;
  display: inline-block;
  margin: 10px;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6SU9F8LWgXhXz3D0bjCSqvtvF-JPZxaQWk9-u0fhl0-Yin-ET4IxH5g');
}
.boxl {
  width: 100%;
  height: 20px;
  margin: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="id_first" class="col-xs-8 first">
  </div>
  <div id="id_second" class="col-xs-4 second">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加

.row.vdivide [class*='col-']:not(:last-child):after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

并将您的HTML更改为

<div class="container">
    <div class="row vdivide">
        <div id="id_first" class="col-xs-8 first"></div>
        <div id="id_second" class="col-xs-4 second"></div>
     </div>
</div>

演示：https://jsfiddle.net/mhadaily/no8pLpq5/

我们可以实施其他方法。