使用CSS - *没有*背景图像的多个相等高度的盒子边框列？

Question

在以下条件下编写CSS布局的方法有哪些：

1）多个等高的列，没有任何列的固定高度，不知道哪个最高，布局只是根据包含最多内容的任何一个扩展所有列。

2）每列都是完全镶边的。

3）没有使用背景图像。

4）适用于webkit，gecko和...是的，IE6 +。 （好吧，我可能会接受IE7 +答案）。

如果您想要一个视觉效果，请：

是我正在尝试处理的作文的相关部分。

如果我放宽任何一个标准，我熟悉一些实现这一目标的方法。这是所有标准，我无法弄清楚该怎么做。

请注意，特别是全边界和无背景图像要求似乎淘汰了许多备受瞩目的解决方案（例如，Matthew Taylor的“Perfect 3 Col Liquid Layout”）。除非你能给出如何定制它的具体说明，否则请不要指出这样的事情。

Answer 1

使用这个jquery插件（http://www.cssnewbie.com/equalheights-jquery-plugin/）我能够均衡三个div（在ie7中测试，这是我记得的最早），如下所示：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script language="JavaScript" src="jquery.equalheights.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var div1 = $("#div1").height(),
    div2 = $("#div2").height(),
    div3 = $("#div3").height(),
    top = Math.max(div1, div2, div3);

alert(top);

$(".divs").equalHeights(top,top);


})

</script>

<style>
.divs{
border: 1px solid #000; width: 100px; float: left
}


</style>

<div id="div1" class="divs">
border1
</div>

<div id="div2" class="divs">
border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2
</div>

<div id="div3"  class="divs" >
border3
</div>