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>and <aside>。