Question

网页设计史上最糟糕的问题。谁在乎，只需选择一个选项。所以我的问题是这样的......

符合标准和（向后）浏览器兼容的最佳答案是什么？

jQuery用于布局，应该为css和html保留 OR
Negative margin，extra containers 或其他黑客或臃肿？

已经花了太多时间在这上面，但寻找“专业”的方式去做。

编辑：这是code example使用亚历山大的方法。

Answer 1

有很多方法可以成功地做到这一点，我认为其中最简单的方法是简单地将它们全部包装在一个共同的父容器中，将他的display设置为table或{{ 1}} 根本不需要父母。并将原始table-row设置为<div>

jsFiddle

Answer 2

通常我使用纯css / html解决方案，在99％的情况下工作：

我有一个父div，背景重复在'Y'ax。一般结构将是这样的：

html:

<div id="container" class="clearfix">

    <div class="LeftPane"></div>
    <div class="CenterPane"></div>
    <div class="RightPane"></div>

</div>

的CSS：

#container{
    background:url(imagePath) 0% repeat y;
}

对于背景图像，您可以为边框应用图像，或者其他所有可以让用户认为所有3个块具有相同高度的图像

Answer 3

我倾向于坚持使用faux columns。

Answer 4

为了兼容性，我建议使用jQuery。正如您所说，黑客和额外容器会使您的代码变得臃肿，如果需要进行更改，最终会使编辑更加困难。无论如何，HTML是页面的布局。

Answer 5

我想出了一种革命性的高等高柱新方法。这是一个纯CSS / HTML解决方案，在最新的Chrome和Firefox以及IE7-9中进行了测试。设置起来有点棘手，但一旦完成它就能很好地工作。我见过的每个解决方案的问题在于它实际上并没有创建单独的并排div，它们可以有自己的边框，边距等。其他解决方案总是有一些列重叠，这意味着你只能对比通过更改背景不同的列。与某些方法不同，此方法允许任何列都是任何高度。成功的秘诀在于使用float: right而不是左边。如果它向左浮动，则会在右侧产生额外空间的问题，从而导致滚动条。也许这种方法唯一的缺点就是你可能很难缠头！

在这里查看。 http://jsfiddle.net/wRCm6/2/

CSS Equal Height Columns - 呃！再次？

5 个答案: