如何在動態變化高度的兩個div之間創建邊界？

Question

我有兩個div，它們的高度是動態變化的。左邊的div可能比右邊的高，相反也是可以的。如何在它們之間創建可根據其高度動態更改的邊框？邊框應該從行的頂部到底部。我使用Bootstrap 4，我更喜歡只有CSS。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="left col-md-6">a</div> 
     <div class="right col-md-6">asdasdasd 
      <br/>a 
      <br/>asdsad 
      <br/>asd 
      <br/>asd 
      <br/>asdsa 
      <br/>d 
      <br/>as 
      <br/>d 
      <br/>asdsad 
      <br/>asdasdasd 
      <br/> 
     </div> 
    </div> 
</div> 
<br/> 
<div class="container"> 
    <div class="row"> 
     <div class="left col-md-6"> 
       <br/>a 
      <br/>asdsad 
      <br/>asd 
      <br/>asd 
      <br/>asdsa 
      <br/>d 
      <br/>as 
      <br/>d 
      <br/>asdsad 
      <br/>asdasdasd 
      <br/> 
     </div> 
     <div class="right col-md-6"> 
      asdasd 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/ravepgz6/

Answer 1

你可以簡單地給兩個容器的邊界，並給予正確的div的一個margin-left: -1px;。

.left { 
    border-right: 1px solid black; 
} 
.right { 
    border-left: 1px solid black; 
    margin-left: -1px; 
} 

https://jsfiddle.net/ravepgz6/1/

這將，但是，失敗，如果你有div之間出現一個基於百分比的差距（因爲可能會導致使用引導列）。對於該用例，請描述或更好地展示結果應該是什麼樣子的圖像。