jQuery的兄弟div的同一高度resize在與文字不包裝

Question

我附上下面

問題我的代碼，我遇到工作時調整窗口出現。該文本溢出其父divs，它看起來不好。溢價我擔心的是溢價出現在高度,而不是寬度。寬度將使用媒體查詢來修復。 如果調整窗口大小，即使調整大小功能指向與文檔加載功能相同的功能，也會看到div的高度不會改變！

基本上我有4個不同高度的div，我在下面的代碼寫在JS部分，使所有的div高度相同。這適用於刷新頁面時（在文檔加載時），但是當我調整瀏覽器的大小時，它並不像我預期的那樣工作。

我已經包含了一個片段（見下文），並創建了一個小提琴here

JS，CSS，HTML

jQuery(document).ready(function($) { 
 
    var myFunction = function featurePageSizing() { 
 
    var elements = "#page-slider .featured .featured-text-container"; 
 

 
    var elementHeights = $(elements).map(function() { 
 
     return $(this).height(); 
 
    }).get(); 
 

 
    var maxHeight = Math.max.apply(null, elementHeights); 
 

 
    $(elements).height(maxHeight); 
 
    } 
 
    myFunction(); 
 
    $(window).resize(myFunction); 
 
});

#page-slider { 
 
    width: 100%; 
 
    background-color: white; 
 
    margin-top: 4px; 
 
} 
 
#page-slider .featured { 
 
    position: relative; 
 
    float: left; 
 
    width: 25%; 
 
    background-color: white; 
 
} 
 
#page-slider .featured .featured-text-container { 
 
    padding: 15px 33px 27px; 
 
} 
 
#page-slider .featured:not(:last-of-type) .featured-text-container { 
 
    border-right: 1px dashed #DCDCDC; 
 
} 
 
#page-slider .featured .featured-text-container .featured-title { 
 
    color: #17513B; 
 
} 
 
#page-slider .featured .featured-text-container .featured-description { 
 
    font-family: Georgia, serif; 
 
    font-style: italic; 
 
    font-size: 13px; 
 
    color: #51A351; 
 
    margin-bottom: 40px; 
 
} 
 
#page-slider .featured .featured-link { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-top: -40px; 
 
    text-align: center; 
 
} 
 
#page-slider .featured .featured-link button.read-more { 
 
    position: relative; 
 
    left: -50%; 
 
    background: #62C462; 
 
    background-image: -webkit-linear-gradient(top, #62C462, #51A351); 
 
    background-image: -moz-linear-gradient(top, #62C462, #51A351); 
 
    background-image: -ms-linear-gradient(top, #62C462, #51A351); 
 
    background-image: -o-linear-gradient(top, #62C462, #51A351); 
 
    background-image: linear-gradient(to bottom, #62C462, #51A351); 
 
    -webkit-border-radius: 5; 
 
    -moz-border-radius: 5; 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    padding: 7px 17px 7px 17px; 
 
    border: solid #008a05 2px; 
 
    text-decoration: none; 
 
    outline: none; 
 
    white-space: nowrap; 
 
} 
 
#page-slider .featured .featured-link button.read-more:hover { 
 
    background: #62C462; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="page-slider"> 
 
    <div class="featured"> 
 
    <div class="featured-text-container"> 
 
     <div class="featured-title"> 
 
     <h2>Here is my topic</h2> 
 

 
     </div> 
 
     <div class="featured-description"> 
 
     <p>Here is a description of my topic.</p> 
 
     </div> 
 
    </div> 
 
    <div class="featured-link"> 
 
     <a href="#"> 
 
     <button class="read-more">Read more...</button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="featured"> 
 
    <div class="featured-text-container"> 
 
     <div class="featured-title"> 
 
     <h2>Cool stuff</h2> 
 

 
     </div> 
 
     <div class="featured-description"> 
 
     <p>Here is more text that explains this briefly, as you can see the amount of text explaining this one is greater than the others, so the height of this div is the one that the other divs should be using when setting their heights</p> 
 
     </div> 
 
    </div> 
 
    <div class="featured-link"> 
 
     <a href="#"> 
 
     <button class="read-more">Read more...</button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="featured"> 
 
    <div class="featured-text-container"> 
 
     <div class="featured-title"> 
 
     <h2>Another section exists here</h2> 
 

 
     </div> 
 
     <div class="featured-description"> 
 
     <p>Internet Explorer, am I right?! Haha...</p> 
 
     </div> 
 
    </div> 
 
    <div class="featured-link"> 
 
     <a href="#"> 
 
     <button class="read-more">Read more...</button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="featured"> 
 
    <div class="featured-text-container"> 
 
     <div class="featured-title"> 
 
     <h2>The Lion King</h2> 
 

 
     </div> 
 
     <div class="featured-description"> 
 
     <p>Come on the Lion King is a GREAT movie! More text is written here too...</p> 
 
     </div> 
 
    </div> 
 
    <div class="featured-link"> 
 
     <a href="#"> 
 
     <button class="read-more">Read more...</button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

任何幫助，這是非常感謝，謝謝。

Answer 1

display:table-cell會幫助你在這裏。

檢查：

#row > div { border:1px solid; display:table-cell; }

<div id="row"> 
 
    <div>aaa aaaaa aaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaa aaaa</div> 
 
    <div>bbbb bbbbbbbbbbbbbbb bbbbbb bbb</div> 
 
    <div>cccc cccccccccccc cccccccccccccccccc cccccccccccccccccccc cccccccccccccccccc cccccccccccccccccc cccccc</div> 
 
</div>