等列jQuery

Question

我一直在开发一个我需要相同列的网站。我使用以下代码：

<script type="text/javascript">
 (function() {
    function equalHeights(selector) {
      var maxHeight = 0;

      function calcEqualHeight() {
        var el = $(this);
        maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
      }

      selector.each(calcEqualHeight).height(maxHeight);
    }

    equalHeights($('.exampleclass1'));
    equalHeights($('.exampleclass2'));
  })();
</script>

麻烦的是，有时当页面加载时，高度并不总是正常工作且内容重叠。我想知道如何更改这个以计算页面加载的高度？

Answer 1

不要使用JS来做CSS工作。

.column1 {background-color: #fcc}
.column2 {background-color: #cfc}

.columns {
  display: flex;
  align-items: stretch;
}
.columns>div {
  flex: 1 0 0;
}

<div class="columns">
  <div class="column1"><p>Short column</p></div>
  <div class="column2">
    <p>Tall column</p>
    <p>Look at how tall I am!</p>
  </div>
</div>

Answer 2

我认为你需要用jQuery包装选择器$(selector) 请改变这个

  selector.each(calcEqualHeight).height(maxHeight);

到这个

return $(selector).each(calcEqualHeight).height(maxHeight);

也可以使用return并告诉我它是否无效！

编辑：CSS flex是一个很好的解决方案，只需将display: flex;应用于父级，它将使其子元素具有相同的高度，如下所示：

<style> 
   .parent{
       display: flex; 
   } 
</stlye>
<div class="parent">
   <div class="chid"></div>
   <div class="chid"></div>
</div>