Equal Columns 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

我認爲你需要這樣$(selector) 與jQuery包裝選擇，請把這個

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>