css - 3列css如何使列均匀？

Question

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

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

我尝试了几种解决方案，但总是出现问题。我想得很清楚：两者兼而有之；可以帮助，但它没有做任何事情。

有任何想法吗？

Answer 1

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

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

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

兼容性是 IE8+，如果需要，IE6/7 的回退与inline-block

以前的答案中更长的解释：这里和那里还有很好的旧方法仿列（你的设计必须考虑到这种技术）

Answer 2

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

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

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

Answer 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/