css - 如何为两个单独的列应用公共 css 属性

Question

我有两列，即“right_col”和“left-col”，它们都有不同的背景颜色。问题是，左列会有动态数据，所以它总是在变化，右列是静态的。每当左列高度增加时背景也适用于那个程度的高度，但右列有静态数据，我需要对右列应用相同的高度，因为左列不是恒定的，取决于左列的高度，右列的高度也会增加，这样它的背景会自动应用到那个程度，似乎很好。我该怎么做？

Answer 1

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

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

检查这个http://jsfiddle.net/7nSqX/ 。

它可以工作到 IE8 及更高版本。

Answer 2

你可以用jquery轻松做到这一点-

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

Answer 3

有很多不同的解决方案，所以我建议重新比较一些技术- 选择最适合您需求的技术。

我会选择最后一个（“偏移列和容器”）——与matthewjamestaylor.com 上的这篇文章中解释的方法相同。