當DIV高度增加時，如何增加兩個DIV之間的邊界高度？

Question

我遇到DIV高度問題。看到圖片，有2個div標籤，div-1有黑色的右邊框。 div-1和div-2的高度沒有設置。我希望任何div高度隨內容增加，然後兩個div標籤之間的邊界會自動增加，並且總是會像picture.if我用table然後它不是這個問題。但使用div標籤這怎麼可能？

-Thanks。

Answer 1

如果你不關心IE7，你可以使用display: table-cell來讓你的佈局更直觀。它會迫使兩個元素具有相同的高度，所以邊界總是會打到你的黑底。

div.page { 
    display: table; 
    width: 500px; 
} 
div.page > section { 
    display: table-cell; 
    width: 70%; 
    vertical-align: top; 
    border-right: 1px solid #ccc; 
} 
div.page > aside { 
    display: table-cell; 
    width: 30%; 
    vertical-align: top; 
} 

HTML

<div class="page"> 
    <section>Left</section> 
    <aside>Left</aside> 
</div> 

演示

http://jsfiddle.net/VEzUG/

當然你也可以使用<div> s，而不是<section>和<aside>。