使用html/css根據其內容固定行或分隔符

Question

如何根據左側或右側部分設置行或分隔符高度（而不是css行高）。例如，假設我們有一個左側面板和一個右側面板。我們在左側面板上繪製線條或分隔線，線條或分隔線根據左側面板內容進行增長。但是我想增加這個線或者分頻器的數量等於面板的內容，不管哪個面板有更多或者更少的數據。

Answer 1

如果你採取正常的div結構方法，它會非常複雜，以獲得平等的高度divs，除非你使用CSS給定了一個固定的高度。 要實現此目標，您可以使div結構呈現爲table佈局，因爲列的高度取決於具有最大高度的單個列。

檢查這個共享代碼，我已經創建了一個div結構，並使其表格和邊界.right div，所以如果不管，哪個列有多少數據，最大高度列將適用於兩個

* { 
 
    box-sizing: border-box; 
 
    /* browser reset */ 
 
} 
 
.parent { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.my-table { 
 
    display: table; 
 
    /* make it behave like table */ 
 
    table-layout: fixed; 
 
    /* so that width of columns doesn't change as per content */ 
 
} 
 
.child { 
 
    width: 20%; 
 
    padding: 15px; 
 
} 
 
.my-col { 
 
    display: table-cell; 
 
    /* make it behave like table-cell */ 
 
} 
 
/* just for visual example */ 
 

 
.my-col+.my-col { 
 
    border-left: 1px solid #000; 
 
}

<div class="parent my-table"> 
 
    <div class="child my-col">No text with me...</div> 
 
    <div class="child my-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</div> 
 
    <div class="child my-col">Home</div> 
 
    <div class="child my-col">About.</div> 
 
    <div class="child my-col">Contact</div> 
 

 
</div>