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/

私たちが実装できる他のアプローチがあります。