当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>。