3列css如何使列均匀？答案

【问题标题】：3 column css how to make the columns even?3列css如何使列均匀？
【发布时间】：2013-04-03 22:54:29
【问题描述】：

我有这个模板：http://demitogroup.com/dgroup/sample.html

我的问题是即使在最后我也无法制作三列。实际上问题只是左列，因为它比其他列短，颜色就在那里结束。

我尝试了多种解决方案，但总是出现问题。我想得很清楚：两者兼而有之；有帮助，但没有任何作用。

有什么想法吗？

【问题讨论】：

标签： css layout

【解决方案1】：

您可以在每一列上使用 display: table-cell，在父 (*) 上使用 display: table。这将迫使您的“单元格”具有相同的高度并保持在同一行。

(*) 在同一父级上添加table-layout: fixed，以便应用精确的宽度，否则浏览器也会适应每个“单元格”的内容。

小提琴：http://jsfiddle.net/PhilippeVay/sFBGX/2/

兼容性为 IE8+，如果需要，IE6/7 的回退与 inline-block 完全相同

以前的答案中的较长解释：here 和 there 以及 faux-columns 的旧方法（您的设计必须考虑这种技术）

【讨论】：

为什么不能加高度：707px；到#secondaryContent？
因为不需要？如果您的内容更高怎么办？我从来不知道柱子的高度，除非是在极少数情况下。
@mgahamjo：如果内容是动态生成的，您将不知道要硬编码的高度。
应该补充一点，display: relative 和 float: ... 必须从子元素中删除才能正常工作，否则这是最好的解决方案（恕我直言）

【解决方案2】：

将以下内容添加到您的样式表中：

#content {
  overflow: hidden;
  clear: both;
}

#tertiaryContent, #secondaryContent {
  padding-bottom: 100000px;
  margin-bottom: -100000px;
}

【讨论】：

黑客解决方案。在边框、背景渐变等方面效果不佳。

【解决方案3】：

我知道 jQuery 没有被标记，但如果所有其他 CSS 解决方案都失败了，这里有 jQuery 代码来支持这一点。（因为网站上有奇怪的 hrml 标记，带有浮动和其他东西）

我创建了这个 jQuery 代码

$(document).ready(function(){
        var left = $("#left").height();
        var right = $("#right").height();

        if (left<=right) $("#left").css("height", right);
        else $("#right").css("height", left);
});

对于这个 HTML 标记

<div id="container">
    <div id="left">Short one</div>
    <div id="right">Long one</div>
<div>

使用这个 CSS

#container {
    width: 100%;
}

#left {
    background: red;
    width: 100px;
    float: left;
}

#right {
    background: red;
    width: 100px;
    float: right;
}

http://jsfiddle.net/cQUep/1/

【讨论】：

请您解释一下否决票？
我更喜欢上面的纯 css 解决方案，但 +1 表示有一天可能有用的解决方案