没有背景的等高列答案

【问题标题】：Equal height columns with no background没有背景的等高列
【发布时间】：2010-08-18 08:43:21
【问题描述】：

这是一个示例代码http://paste.ideaslabs.com/show/kmGATPRovx。如何使第二个块看起来像第一个在 .front-content 块中有更多内容的块？最大的问题是 .front-description 的下边框的位置。

【问题讨论】：

一个活生生的例子会更好和感激，帮助我们帮助你:)
您可以点击“下载”并将其保存为 HTML 文件 ;)
顺便说一句，对于像两个水平堆叠的列这样简单的东西，您还可以考虑使用display: inline-block; 而不是float: left;，因为它可以保持块“布局”并避免清除问题。
这是一个活生生的例子paste.ideaslabs.com/download/kmGATPRovx
@Molfar - 这不是一个活生生的例子，那是你的代码。一个活生生的例子是我们可以看到该代码的行为方式。

标签： html css xhtml layout

【解决方案1】：

我对“解决方案”的建议可以在here 找到。它并不优雅，但在浏览器（IE/FF 快速测试）中，它看起来像我认为您正在寻找的东西。我所做的是添加一个新的 div.front-wrapper，它具有所需的底部边框和 25% 的宽度以及一个负边距顶部。我从 div.front-description 中删除了边框底部。然后，在“包装”-div 关闭后，我用类前置包装器放置了一个空 div。

当然，前端包装器现在有一个误导性的类名，因为它没有包装任何东西，但这就是我开始使用它的目的，但无法让它按预期工作。所以一定要重命名。

【讨论】：