Question

我在我的网站上使用Bootstrap，我添加了一些jQuery，使每列成为最高列的高度。这没关系，但问题是高度不是特定于行的。因此，高度将被设置为整个页面中最高的元素。如何更改此代码以使行中的每个元素仅设置为同一行中的最高元素？

＆＃13;

$(function() {
  function equalHeight(group) {
      var maxHeight = 0;
      group.each(function () {
          $(this).removeAttr('style');
          maxHeight = Math.max(maxHeight, $(this).height());
      });
      group.css({ height: maxHeight + 'px' });
  }
  equalHeight($('.equal'));
});

＆＃13;

.equal {
background:yellow;
margin-bottom:40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-sm-3 equal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="col-sm-3 equal">
    Donec consequat malesuada sapien sit amet lacinia. In faucibus, felis nec condimentum volutpat, ante felis dictum dui, eget tincidunt arcu risus id nisl. Suspendisse faucibus neque at massa elementum, id porta nunc semper.
    </div>
    <div class="col-sm-3 equal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum odio velit, in tempus purus posuere eget.
    </div>
    <div class="col-sm-3 equal">
    <strong>ALL HEIGHTS ARE BASED ON THIS COLUMN: </strong>Sed sodales augue sed est vulputate gravida. Mauris rutrum, felis vitae tincidunt fermentum, ipsum ipsum porta felis, quis cursus tortor metus in sapien. In at eros malesuada, facilisis enim eget, volutpat tellus. In accumsan odio in urna suscipit auctor. Integer iaculis leo sit amet felis consectetur sodales. Nulla lobortis nec justo at fermentum. Donec efficitur in est eu volutpat. Etiam sed felis id lorem pretium auctor. Aenean placerat, neque ac posuere feugiat, justo ex gravida ante, et semper diam velit eu dolor. Duis efficitur maximus odio, viverra imperdiet odio dictum vitae.
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3 equal">
    Cras dignissim eget enim et auctor.
    </div>
    <div class="col-sm-3 equal">
    Mauris massa quam, tincidunt in nulla gravida, viverra vulputate est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="col-sm-3 equal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="col-sm-3 equal">
    Nulla venenatis pharetra sapien, et lobortis diam commodo rutrum. Sed varius sit amet lectus ac condimentum. Maecenas lacinia ligula eget ultricies dictum. Proin a eros velit. Sed facilisis vehicula mauris, nec egestas augue vulputate ac.
    </div>
  </div>
</div>

＆＃13;

Answer 1

CSS解决方案：

您可以将父div设置为display: flex。在这种情况下，CSS将如下所示：

.row {
  display: flex;
}

示例：https://jsfiddle.net/koralarts/e50wonqz/

Javascript解决方案：

在Javascript解决方案中，我使用类rows遍历每个equal，而不是使用所述类循环遍历columns。

这将确保我们的范围在row范围内，而不是所有可用的columns。

function equalizeHeight(group) {
  var maxHeight = 0;
  group.each(function(index) {
    var divHeight = $(this).height();
    if(divHeight > maxHeight) {
      maxHeight = divHeight;
    }
  });

  group.css('height', maxHeight);
}

可以这样调用此函数：

$('.equal').each(function() {
  equalizeHeight($(this).children('div'));
});

https://jsfiddle.net/koralarts/e50wonqz/4/

Answer 2

Jquery中有一个插件

https://github.com/mattbanks/jQuery.equalHeights检查一下。

$('.equal').equalHeights();

每行等高柱

2 个答案: