我有两列并排的不同颜色.背景也有独特的颜色.右列包含将扩展到未知高度的文本.另一栏几乎没有.
<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做到这一点？
解决方法
除了使用Javascript之外,还有一些其他方法可以实现此布局.
>在元素上使用display：table
>仿列(父元素上的背景图像)
>为每个背景添加多个div容器
>使用表格(由于显而易见的原因,不是很受欢迎)
所有这些都具有不同的优点,缺点,并且每个都引入了对网站开发的自身麻烦.我投票支持使用仿制列,因为它使html保持最简单并且与所有浏览器兼容.
补充阅读：
> http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
> http://www.alistapart.com/articles/fauxcolumns/
> http://www.code-sucks.com/css%20layouts/faux-css-layouts/
> http://www.addedbytes.com/articles/faux-columns-for-liquid-layouts/
