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;
}

使用jquery连续列的相等高度

1 个答案: