jQuery同级divs高度与窗口调整大小不兼容文本换行

Question

I have attached my code below

The issue I am experiencing occurs when resizing the window. The text overflows its parent divs and it looks bad. The overflow I am worried about deals with the overflow that appears in terms of height , not width . The width will be fixed using media queries. If you resize the window, you will see the height of the divs do not change, even with the resize function pointing to the same function as the document load function!

Basically I have 4 divs with different heights and I have the code written below in the JS section that makes all the divs the same height. This works when refreshing the page (on document load), however when I resize my browser, it does not work as I would expect it to.

I have included a snippet (below) and created a fiddle 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> 

Any help with this is greatly appreciated, thank you.

Answer 1

display:table-cell will help you here.

Check this:

 #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>