Одноуровневые элементы jQuery одинаковой высоты с изменением размера окна, не работающим с переносом текста

Я прикрепил свой код ниже

Проблема, с которой я сталкиваюсь, возникает при изменении размера окна. Текст переполняет родительские элементы div и выглядит плохо. Переполнение, о котором я беспокоюсь, связано с переполнением, которое проявляется с точки зрения высоты, не ширины. Ширина будет зафиксирована с помощью медиа-запросов. Если вы измените размер окна, вы увидите, что высота элементов div не изменится, даже если функция изменения размера указывает на ту же функцию, что и функция загрузки документа!

В основном у меня есть 4 div с разной высотой, и у меня есть код, написанный ниже в разделе JS, который делает все div одинаковой высоты. Это работает при обновлении страницы (при загрузке документа), однако, когда я изменяю размер своего браузера, это не работает, как я ожидал.

Я включил фрагмент (ниже) и создал скрипт здесь

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>

Любая помощь в этом очень ценится, спасибо.


javascript html jquery css window-resize
person ctwheels    schedule 12.05.2015    source источник
comment
P.S. Я просмотрел другие сообщения, посвященные этому (которые, я полагаю, кто-то пометит как дубликат), однако решения там не сработали. Я перепробовал все решения, которые смог найти, и потратил на это около 2 часов. Я чувствую, что упускаю из виду что-то простое.   -  person ctwheels    schedule 12.05.2015
comment
@ humble.rumble.6x3 Переполнение, о котором я говорю, касается высоты div, а не ширины. Ширина будет дополнительно контролироваться с помощью @media в моих файлах css. Я отредактирую свой пост, чтобы уточнить это.   -  person ctwheels    schedule 12.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

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>

person c-smile    schedule 12.05.2015
comment
Вот почему я люблю этот сайт. Ответы иногда настолько просты, что вы не замечаете их, но кто-то другой думает об этом, и это делает вашу жизнь намного проще. Спасибо, для этого решения даже не нужен jQuery. - person ctwheels; 12.05.2015