如何正確地使CSS與垂直酒吧

Question

我想在CSS中使用邊框的一些垂直酒吧。我正在使用Boostrap網頁系統，並且正在嘗試向某些列添加左右邊框。當一行中的某一列（一個沒有邊界）比列的高度高於具有邊界的列時，會出現問題。邊框將與空白空間行之間的類似下面的ASCII支離破碎：

content |   some text in a row 
content |   that keeps 
content |   on going 
blank    and going 
blank    and going 
blank    and going 
content |   some text in a different row 
content |   that goes up to here 

編輯：

<div class="row"> 
    <div class="col-md-3"> 
    ... 
    </div> 
    <div class="col-md-3" style='border-left: 1px solid black; border-right: 1px solid black;'> 
    ... 
    </div> 
    <div class="col-md-6"> 
    ... (Stuff here is vertically taller than stuff in previous column) 
    </div> 
</div> 

假裝|是連接並沒有這些部分之間的間隙。我怎麼解決這個問題？

Answer 1

Read all you ever need to know about faux columns。

管理概要：在父元素上放置垂直平鋪背景，從而給出兩個元素高度相同的錯覺。您將瞭解到的關於CSS的最重要的一課就是它只是一個演示工具，並且不需要以任何方式與您的實際佈局相對應。

如果舊的瀏覽器是of no concern，請改爲使用flexbox。