CSS 等高列 - 呃！再次？
是的，网页设计史上最糟糕的问题。谁在乎呢，只需选择一个选项即可。所以我的问题是这样的......
符合标准和（向后）浏览器兼容的最佳答案是什么？
jQuery用于布局，应该为 css 和 html 保留
或
负边距，额外的容器，或其他黑客或膨胀？
已经在这方面花费了太多时间，但正在寻找“专业”的方法来做到这一点。
编辑：这是使用亚历山大方法的 代码示例。
Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this...
What is the best answer to be standards compliant and (backwards) browser compatible?
jQuery used for layout which is supposed to be reserved for css and html
OR
Negative margin, extra containers , or other hacks or bloat?
Already spent too much time on this but looking for the "professional" way to do it.
EDIT: Here is a code example using Alexander's method.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
通常我使用纯 css/html 解决方案，它在 99% 的情况下都有效：
我有一个父 div，在“Y”轴上有背景重复。一般结构将是这样的：
css：
对于背景图像，您可以将图像应用于边框，或者其他任何可以让用户认为所有 3 个块具有相同高度的内容
Usually I use pure css/html solution which works in 99% cases:
I have a parent div with background-repeat on 'Y' axe. The general structure is going to be like this :
css:
for background image you can apply image for the borders, or everything else what can make users to think that all 3 blocks have the same height
有很多方法可以成功做到这一点，我认为其中最简单的一种就是简单地
将它们全部包装在一个公共父容器中，将其根本不需要父级。并将原始display设置为table或table-row设置为display: table-cell;jsFiddle。
There are many ways of successfully doing that, I think the easiest one of them is to simply
wrap them all in a common parent container, set hisNo need for parent at all. and set the originaldisplaytotableortable-row<div>s todisplay: table-cell;jsFiddle.
为了兼容性我建议使用 jQuery。正如您所说，黑客和额外的容器会使您的代码变得臃肿，并且如果需要进行更改，最终会使编辑变得更加困难。无论如何，HTML 是页面的布局。
For compatibility I'd suggest jQuery. Hacks and extra containers make your code bloated, as you've said, and will end up making it more difficult to edit if changes need to be made. And anyways, HTML is the layout of the page.
我想出了一种革命性的等高柱新方法。它是一个纯 CSS/HTML 解决方案，在最新的 Chrome 和 Firefox 以及 IE7-9 中进行了测试。设置起来有点棘手，但一旦完成，效果就会很漂亮。我之前见过的每个解决方案的问题是，它实际上并没有创建单独的、并排的 div，这些 div 可以有自己的边框、边距等。其他解决方案总是有一些列重叠，这意味着您只能对比通过改变背景不同的列。与某些方法不同，此方法允许任何列具有任意高度。其成功的秘诀是使用
float: right而不是 left。如果它向左浮动，则会出现右侧多余空间导致滚动条的问题。也许这种方法唯一的缺点是你可能很难理解！在这里查看一下。
http://jsfiddle.net/wRCm6/2/
I have come up with a revolutionary new method for equal height columns. It is a pure CSS/HTML solution, tested in the latest Chrome and Firefox, and IE7-9. It is a bit tricky to set up but once it is done it works beautifully. The problem with every previous solution I have seen is that it doesn't actually create individual, side-by-side divs that can have their own borders, margins, etc. Other solutions always have some columns overlapping which means you can only contrast the different columns by changing the background. This method allows any column to be any height unlike some methods. The secret to its success is using
float: rightinstead of left. If it was floated left you would have issues with extra space on the right causing scroll bars. Perhaps the only down side with this method is that it can be hard to wrap your head around!Check it out here.
http://jsfiddle.net/wRCm6/2/