0

それぞれが見出しタグを含むいくつかの連続した 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 を使用した解決策があれば知りたいと思います。 3 つのタグすべての 3 つの見出しタグの高さ。

ノート：

  1. このシナリオの 3 つのセクションはすべて横一列に並べて配置されるため、主要な見出し要素の高さのバランスを取る必要があります。
  2. Javascript の使用は許可されていません。
  3. セクション要素から見出し要素を取り出すこともできますが、セマンティクスは残しておきたいと思います。

上記に基づいて、解決策が見つかった場合は、ご意見をいただければ幸いです。

4

1 に答える 1

1

私は実際に今朝、この問題について投稿しました。参照してください: Set height of 3 elements, taking maximum 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/

于 2013-08-28T11:35:48.413 に答える