CSS 사이의 수직 구분선 공간 크기 조정

Question

'id_first'와 'id_second'열 사이의 공백에 세로 구분선을 추가하려고합니다. 칸막이는, 윈도우의 사이즈 변경시에도, 2 개의 열의 사이의 중심을 유지할 필요가있다.

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>'); 
 
}

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

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

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

을 추가하고

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

에 HTML을 변경

데모 : https://jsfiddle.net/mhadaily/no8pLpq5/

구현할 수있는 다른 방법이 있습니다.