css - 使两个 float 的 CSS 元素具有相同的高度

Question

我有两个元素，它们的高度可以变化并且彼此相邻 float 。问题是如果一个盒子比另一个高，它看起来很难看。所以我希望它们的高度相同。

我认为可行的一种方法是将它们包装在一个容器 div 中，并希望较高的调整它的大小而较小的扩展以适应空间:

HTML:

<div id="outerBox">
<div class="innerBoxLeft"></div>
<div class="innerBoxRight"><br /><br /><br /></div>
</div>

CSS:

.outerBox
{
width: 100%;
}

.innerBoxLeft
{
float:left;
width: 45%;
height: 100%;
}

.innerBoxRight
{
float:right;
width: 45%;
height: 100%;
}

不起作用。我相信这可能是因为外部 div 没有设置高度，并且出于某种原因，较小的盒子和 100% 的高度没有任何作用。但是我不能给它一个设定的高度，因为那会破坏这一点。

所以除非有另一种方法，否则我想我是在问:如何将子元素的高度设置为其父元素的高度？

谢谢

Answer 1

为什么不用表格？

这太荒谬了。用户想要查看表格。 HTML 语言提供了一个表格元素来准确地实现用户想要的目标。然而，我们使用整个库(我正在查看 JQuery 答案)来实现没有表的目标，即使这意味着在客户端上运行脚本!