使用 CSS 平衡两个不同容器中元素的高度

Question

我有几个连续的节元素，每个节元素都包含一个标题标签。是否可以仅使用 CSS 强制浏览器以完全相同的高度呈现这些标题标签（使浏览器使用最大的计算值而不实际指定确切的值）。下面的代码片段应该让您更清楚地了解我所拥有的内容以及我希望浏览器使用最大计算的高度值呈现哪些部分。

<section>
   <h2>Heading One</h2>
   <img src = ''>
   <p>Some Text</p>
</section>
<section>
   <h2>Heading Two</h2>
   <img src = ''>
   <p>Some Text</p>
</section>
<section>
   <h2>Heading Three</h2>
   <img src = ''>
   <p>Some Text</p>
</section>

由于此结构中的某些标题可能包含跨越几行的文本，从而导致标题的高度不同，我想知道一个使用 CSS 的解决方案，如果存在的话，它可以强制浏览器使用所有三个标签的三个标题标签的最大高度值。

注意事项：

1. 此方案中的所有三个部分都将在水平方向上并排放置，这需要平衡主要标题元素的高度。
2. 不允许使用 Javascript。
3. 虽然标题元素可以从节元素中取出，但我想保留语义。

基于上述，如果可以找到解决方案，我将非常感谢您的意见。

Answer 1

我今天早上确实发了一篇关于这个问题的帖子，请看：Set height of 3 elements, taking largest value, across multiple rows

我认为不使用 javascript/JQuery 是不可能的

使用 JQuery：

var $sections = $('section');

$sections.filter(':nth-child(3n-2)').each(function () {
    var $this = $(this),
        $els = $this.nextAll(':lt(2)').addBack();

    var sectionheight = new Array();
    $els.each(function () {
        var value = $(this).height();
        sectionheight.push(value);
    });
    var newsectionheight = Math.max.apply(Math, sectionheight);
    $els.height(newsectionheight);
})

Arun P Johny 的小提琴：http://jsfiddle.net/arunpjohny/6JqB2/