如何为两个单独的列应用常见的css属性

Question

我有两列，即'right_col'和'left-col'，两者都有不同的背景颜色。问题是，左列会有动态数据，所以它总是变化而右列是静态的。每当左列高度增加其背景也适用于那个范围高度但是右列有静态数据，我需要将相同的高度应用到右列，因为左列不是常数，因为左列高度，右列高度也增加所以，它的背景将自动应用到那个程度，似乎很好。我怎么能这样做？

Answer 1

您可以使用 display：table-cell 属性。写得像这样：

.left,.right{
    display:table-cell;
}

选中http://jsfiddle.net/7nSqX/。

直到IE8＆amp;上方。

Answer 2

有很多不同的解决方案，所以我建议重新this great comparision of some techniques - 选择最适合您需求的解决方案。

我会选择最后一个（“偏移列和容器”） - 与this article on matthewjamestaylor.com中解释的方法相同。

Answer 3

您可以使用jquery轻松完成此操作 -

$(document).ready(function(){
    var left = $('#left_col'),
        right = $('#right_col'),
        left_height = left.css('height');
    right.css('height',left_height);
});