随着其他列变长，更改列高答案

【问题标题】：Change column height as other column gets longer随着其他列变长，更改列高
【发布时间】：2010-06-11 06:32:18
【问题描述】：

我已经尝试了一些方法来解决这个问题，但我似乎无法让它发挥作用。

问题是我有 2 列作为我网站的主要部分，左右两列。在某些页面上，左栏中的文字很多，因此很长，问题是右栏没有与左栏一起拉长。

两列具有相同的背景颜色，并且在两列完成后，两列的宽度上都会显示一个页脚。

我的第一个想法是将两列放在一个 div 中，它的背景颜色与它们相同，因此如果左列总长为 1500 像素，右列保持在 600 像素左右（由于其中的元素）那么这不会显示为新的外部 div 将与左列一起拉长。但由于某种原因，这不起作用。难道是因为列是浮动的？

还有人有其他想法吗？

这是网站（显然还没有完成）：Beansheaf Hotel

我选择了一个页面，其中左栏中有很多文本，所以问题很明显。提前致谢，

英菲尼迪菲兹

【问题讨论】：

【解决方案1】：

这家伙解决了它：http://www.ejeliot.com/blog/61

此外，本文后面的 cmets 提供了一种或两种其他方法，例如使用 display:table。

您的列的浮动性质确实是包含 div 不扩展的原因，您是对的。所以尝试使用这里彻底描述的技术：http://www.positioniseverything.net/easyclearing.html

值得围绕主题阅读以了解原因、内容和方式，因为许多人发现一直需要这样做，而不仅仅是柱状布局。

【讨论】：

【解决方案2】：

这是我发现有用的另一个链接：

【讨论】：

【解决方案3】：

您可以为主 div 赋予 css 属性 display:table;，而不是为内部 div 赋予属性 display:table-cell;。否则，您将需要使用 <table> 并将内容放在 <td> 中。前面的内容类似于：

【讨论】：