Question

我有两列不同颜色的列。背景也有独特的颜色。右列包含将扩展到未知高度的文本。另一栏几乎没有。

<div id="container">
    <div id="leftColumn">
        <p>Only one small paragraph here</p>
    </div>

    <div id="rightColumn">
        <p>Many large paragraphs inside here.</p>
    </div>
</div>

我希望左列与右列完全相同。

这是CSS ...

#leftColumn {
    display:inline-block;
    width: 200px;
}
#rightColumn {
    display:inline-block;
    width: 600px;
    vertical-align: top;
}

因此，当页面加载时，我使用jQuery根据右列的高度设置左列的高度。

$(document).ready(function() {
    $('#leftColumn').css('height', $('#rightColumn').innerHeight());
});

有没有办法只使用CSS？

Answer 1

除了使用Javascript之外，还有其他一些方法可以实现此布局。

方法包括：

在元素上使用display：table
虚假列（父元素上的背景图片）
为每个背景添加多个div容器
使用表格（由于显而易见的原因而不是很受欢迎）

所有这些都有不同的优点，缺点，每个都引入了自己的网站发展的头痛。我投票支持使用仿制列，因为它使html保持最简单并且与所有浏览器兼容。

补充阅读：

Answer 2

可以使用<table>

轻松完成

Answer 3

我不确定是否有纯CSS方式（可能在CSS3中）。但是你应该阅读这篇文章，看看它是否适合你。

http://www.alistapart.com/articles/fauxcolumns/

如果没有，你可以考虑这种技术（这需要很多愚蠢的标记）。

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

CSS替代此CSS-jQuery代码？

3 个答案: