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完全相同

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

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/

3列css如何使列均匀？

3 个答案: