jQuery 兄弟 div 具有相同高度 window 调整大小不适用于文本换行

Question

我在下面附上了我的代码

我遇到的问题发生在调整 window 大小时。文本溢出其父 div，看起来很糟糕。我担心的溢出处理以高度、而非宽度出现的溢出。宽度将使用媒体查询固定。 如果你调整 window 的大小，你会看到 div 的高度没有改变，即使调整大小函数指向与文档加载函数相同的函数！

基本上我有 4 个不同高度的 div，我在下面的 JS 部分中编写了代码，使所有 div 具有相同的高度。这在刷新页面时有效（在文档加载时），但是当我调整浏览器大小时，它无法正常工作。

我添加了一个片段（如下）并创建了一个 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>

非常感谢任何帮助，谢谢。

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>

jQuery 兄弟 div 具有相同高度 window 调整大小不适用于文本换行

jQuery sibling divs same height with window resize not working with text wrapping

html

javascript

css

jquery

window-resize