Question

我有几个连续的section元素，每个元素都包含一个标题标记。是否可以强制浏览器仅使用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的解决方案，如果存在，可以强制浏览器使用所有三个标签的三个标题标签的最大高度值。

说明：

此场景中的所有三个部分将彼此水平放置成一行，这需要平衡主要标题元素的高度。
不允许使用Javascript。
虽然标题元素可以从section元素中取出，但我想保留语义。

基于前面提到的，如果能够找到解决方案，那么我将非常感谢您的意见。

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/

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

说明：

1 个答案: