html - 使用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 的 fiddle :http://jsfiddle.net/arunpjohny/6JqB2/