css - 当任何 DIV 高度增加时，如何增加两个 DIV 之间的边框高度？

Question

我对 DIV 高度有疑问。看图片，有 2 个 div 标签和 div-1 有黑色的右边框。并且 div-1 和 div-2 高度未设置。我希望这些 div 高度中的任何一个随着内容的增加而增加，然后两个 div 标签之间的边框将自动增加并且总是像图片一样。如果我使用表格那么它不是'那个问题。但是使用 div 标签这怎么可能呢？

-谢谢。

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> .