两列布局

Question

这是我想要做的。

我有两列。我们称它们为col1和col2。我想要这样，如果col2的高度增加，col1的高度将相应地增加到相同的高度。我怎样才能做到这一点？

我知道我可以使用表格，但我正在寻找一种基于css的解决方案。

Answer 1

有一吨的教程在谷歌：

http://www.google.ca/search?sourceid=chrome&ie=UTF-8&q=same+height+columns

其他的东西在这里：

Equal height columns in jQuery

Answer 2

由于CSS - Equal Height Columns?已经解释了最好的资源可能是http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

基本上你有你的专栏周围的包装他们成为你的实际背景，而不是自己的专栏。

Answer 3

您可以使用的人造列技术的图像假的，但你可以只是CSS做到这一点 - http://jsfiddle.net/spacebeers/s8uLG/3/

你设置你的容器了溢出设置为隐藏，然后在每一个DIV新增排除与容限底部和相等的正面填充底部。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

编辑：如果你想有一个边框圆它，然后看看这个例子 - http://www.ejeliot.com/samples/equal-height-columns/example-6.html