使用CSS的等高高度元素 [英] Equal height elements with CSS

问题描述

我阅读了几个不同的解决方案来模拟等高列或元素，但没有一个真正吸引了我的注意，因为他们使用hack，非常复杂的HTML布局或不广泛支持的属性。

I read about several different solutions to simulate equal-height columns or elements, but none of them really captured my attention because they were using hacks, incredibly complex HTML layouts or not widely supported attributes.

以下是示例小提琴。

我的目标是确保所有的元素具有相同的高度，或者，至少，行的最大高度的兄弟姐妹。

My goal would be to make sure all the elements have the same height or, at least, the maximum height of the siblings in the row.

一行由3元素（在这种情况下，不存在行包装，但我可以考虑添加这样的容器元素）。

A row is composed by 3 elements (in this case, no row wrapper exists but I may consider to add such container element).

有一个解决方案：

1. 不需要JS


2. 不使用 display：table


3. 不使用带有负值的宽填充/边距


4. 不需要指数使用div和float

1. doesn't require JS
2. doesn't use display: table
3. doesn't use wide padding/margin with negative values
4. doesn't require exponential uses of divs and float

推荐答案

由于您所做的限制：不，

With the restrictions you made: No, there isn't.

编辑：因为你没有提到：你可以使用表。 （欢迎回到90年代）

edit: Because you didn't mention this: You could use tables for this. (welcome back to the 90s)

这篇关于使用CSS的等高高度元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！