我有两个颜色不同的并排列。背景也有独特的颜色。右栏包含将扩展到未知高度的文本。另一列几乎没有内容。
<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 最简单并且与所有浏览器兼容。
补充阅读:
关于jquery - CSS 替代此 CSS-jQuery 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2170447/