0

我有几个连续的部分元素，每个部分元素都包含一个标题标签。是否可以仅使用 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. 虽然标题元素可以从节元素中取出，但我想保留语义。

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

4

1 回答 1

1

我今天早上确实写了一篇关于这个问题的帖子，请参阅：设置 3 个元素的高度，取最大值，跨多行

我认为不使用 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/

于 2013-08-28T11:35:48.413 回答