javascript - 使用jquery使一行中的列高度相等

Question

我试图将行中的列设置为具有相等的高度，但该脚本似乎不起作用。它使我的列相等，但将高度设置为 0px。

JS

var EqualColumnHeight = {
  equalizeColumnHeights: function() {
    if ($( window ).width() > 720) {
      //$('.row .equal-height').equalHeights();
      $('.equals .equal-height').each( function () {
        $(this).css('height', $(this).parent().height()+'px');
      });
    } else {
      $('.equals .equal-height').each(function() {
        $(this).css('margin-bottom', '40px');
      });
    }
  }
};

$(window).load(function () {
  EqualColumnHeight.equalizeColumnHeights();
});

CSS

.dark-box {
  background: rgba(9,31,38,.8);
  color: #fff;
  padding: 30px;
}

HTML

<div class="row equals">
  <div class="five columns dark-box equal-height">
    <h2>Proin commodo metus id aliquam egestas</h2>
    <p>Donec lobortis elit nunc, vitae tristique odio dictum in. Curabitur risus dui, porta non malesuada id, dapibus et ex. Suspendisse euismod nec risus ac vehicula. Cras lobortis tellus id maximus laoreet. Sed sit amet aliquam ex, ut malesuada justo. Aliquam id lacus at leo faucibus interdum vel nec urna.</p>
  </div>
  <div class="five columns dark-box equal-height">
    <h2>Ut sed urna in elit consectetur laoreet</h2>
    <p>Etiam finibus dapibus urna, in eleifend lorem molestie a. Nulla tincidunt quis lectus sit amet tincidunt. Nunc vehicula feugiat leo, at pretium erat lacinia posuere. Mauris posuere odio non urna suscipit, vel imperdiet dolor fermentum. Etiam finibus scelerisque molestie. Aenean bibendum est lacus, ac sollicitudin est cursus ut. Nam sed ante vel nulla mollis tincidunt. Phasellus nec massa lacinia, accumsan velit sit amet, cursus mauris. Pellentesque ligula nulla, elementum ac risus in, volutpat efficitur odio. Nullam ut arcu venenatis, molestie mauris sit amet, egestas metus.</p>
  </div>
</div>

Answer 1

我做了一个jsFiddle:http://jsfiddle.net/xpdg5ov2/5/

我在执行 $(window).load 时遇到错误，我必须将其更改为 $(document).ready

我还注意到父级高度在每个循环中都发生了变化

编辑:在那一个中​​，div 的高度确实相同，但是父级高度在更改子级后发生了变化。所以我只是让它垂直对齐到顶部: http://jsfiddle.net/xpdg5ov2/5/

另请注意，您的窗口必须超过 720 像素。由于你的代码。这是一个没有窗口限制的jsfiddle http://jsfiddle.net/xpdg5ov2/6/

完整代码以防 jsfiddle 不适合你: jQuery:

$(document).ready(function () {
      var parentHeight = $('.equals .equal-height').parent().height();
      $('.equals .equal-height').each( function () {
        $(this).css('height', parentHeight+'px');
      });
});

CSS:

.dark-box {
    background: rgba(9, 31, 38, .8);
    color: #fff;
    padding: 30px;
    width: 45%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: text-top;
}