jquery - 将标题标签对齐为空格

Question

我在对齐标题标签和其下方的段落标签之间的空格时遇到问题(如下示例)

<div class="row">
    <div class="col-lg-6">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="col-lg-6">
         <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
</div>

基本上，如果其中一个高度因更多文本而下降到第二行而变大，是否有办法设置 H2 高度？这样两个 H2 高度仍然匹配。我使用的是 wordpress，因此标题高度可能会因当前帖子而异。

如果您需要更多信息，请告诉我!

谢谢

Answer 1

鉴于您可能拥有动态内容，因此没有办法使用 CSS 动态控制此 ar 运行时。

但是，在 jQuery 中，您可以:

var height = Math.max.apply(null, $(".row h2").map(function (){
    return $(this).height();
}).get());
$(".row h2").css({height:height+'px'});

参见 this fiddle ，您可能需要在第二个 header 位于两行时运行它，以便您了解情况。

这样做是获取标题元素的最大高度(因此获取最大高度)，并将其应用于每个元素。