两列布局答案

【问题标题】：Two column layout两列布局
【发布时间】：2012-01-17 18:02:46
【问题描述】：

这就是我想要做的。

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

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

【问题讨论】：

stackoverflow.com/search?q=css+equal+height
还有你目前尝试过的例子吗？

标签： html css

【解决方案1】：

Google 上有大量教程：

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

这里的其他东西：

Equal height columns in jQuery

【讨论】：

【解决方案2】：

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

基本上，您的列周围有包装器，它们成为您的实际背景，而不是列本身。

【讨论】：

【解决方案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

【讨论】：