使两个浮动CSS元素具有相同的高度

Question

我有两个元素,它们的高度可以不同,并且彼此相邻.问题是,如果一个盒子高于另一个盒子,它看起来很丑陋.所以我希望它们的高度相同.

我认为可行的一种方法是将它们包装在容器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答案)来实现w/oa表的目标,即使它意味着在客户端上运行的脚本!

Answer 2

我认为表应该用于创建它们 - 这就是存储数据,而不是显示布局.

如果你想要好的,跨浏览器和无黑客的CSS解决方案 - 请查看这篇文章.