CSS替代此CSS-jQuery代码？

我有两列不同的颜色。背景也具有独特的颜色。右列包含将展开至未知高度的文字。另一列几乎不包含任何内容。CSS替代此CSS-jQuery代码？

<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来做到这一点？

来源

2010-01-31 user182666

CSS可能不适合这份工作的唯一工具，当其他工具借给自己更好地一个问题EM。 HTML表格不是邪恶的;尽管在CSS支持良好之前它们可能被过度使用，但表格仍然占有一席之地。当你谈论的是平等的高度时，表格自动具有这一点，并且仍然可以通过CSS进行控制，从而为混合解决方案提供两全其美的解决方案。否则，如果使用一种工具来排除其他人，则它会变得很复杂。 – 2010-01-31 03:45:57

然后，作者又一次要求提供一个CSS解决方案，所以也许试图强制我们的理想排除直接回答问题是对付这个过程。 – 2010-01-31 04:06:16

还有一些其他的方法来实现这一布局，除了使用Javascript。

方法包括：

使用显示：（父元素上的背景图像）上的元素表
仿列
添加多个格容器为每个背景
使用一个表（由于显而易见的原因，不太流行）

所有这些都有不同的优点和缺点，并且每个都引发他们对网站开发的头痛。我会投票使用虚拟列，因为它使html最简单，并与所有浏览器兼容。

补充阅读：

来源

2010-01-31 03:37:22

什么是缺点使用显示：在div上的表？ – 2010-01-31 03:51:50

@Jitendra - IE 6/7不支持display：table。 – 2010-01-31 03:56:05

感谢您的选择列表。我将不得不考虑什么是最适合我的设计的。选项3看起来像可能工作得很好的东西。虚拟列也很好看，但我不确定是否需要处理IE和其他浏览器之间的盒型模式差异。 – user182666 2010-01-31 04:31:13

可以与<table>

来源

2010-01-31 03:28:00

除非他显示表格数据，这是不好的想法（tm） – rossipedia 2010-01-31 03:31:24

Downvoted（对不起），因为这是一个不好的建议。 – metrobalderas 2010-01-31 03:33:32

@Bryan Ross - 在空中做循环来实现一些简单的和现有的工具，在编程中通常是一个坏主意。另外，div比表格的语义更少。 – 2010-01-31 03:34:27

很容易做到，我不知道是否有一个纯CSS的方式来做到这一点（也许在CSS3）。但是你应该阅读这篇文章，看看它是否适合你。

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

如果没有，你可以考虑这种技术（要求傻标记的LOT）。

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

来源

2010-01-31 03:34:17 jessegavin

为什么downvote？有没有搞错？ – jessegavin 2010-01-31 03:36:53

为第二个链接+1 ..它没有很多愚蠢的标记..一个额外的每个列的包装div .. – 2010-01-31 03:45:34

CSS替代此CSS-jQuery代码？

回答

相关问题