Динамическая высота тега статьи

Question

Возникают проблемы с динамической настройкой блоков контента, в частности их высоты. иметь структуру кода (не обращайте внимания на пропущенные закрывающие теги и т. д., они есть в работающей версии):

<div class="wrapper">
  <article>
    <div class="inner-wrap">
      <div class="front_panel">
        <a>some content(might involve image)</a>
      </div>
      <div class="back_panel">
        <a>some more content</a>
      </div>
    </div>
    <div class="outer-wrap">
      <a>some more content</a>
      <a>some bottom content</a>
    </div>
  </article>
  .....
  <!--more articles here-->
  <article>..</article>
</div>

Так что проблема, иногда часть контента слишком длинная, поэтому она превышает мою стандартную высоту 265 пикселей. Я хотел бы сделать его более динамичным и адаптировать высоту, но поскольку все статьи должны быть выровнены в соответствии с руководящими принципами проектирования, высота всех статей должна быть одинаковой, другими словами, если я динамически изменяю высоту от 265 до 280 пикселей на одна статья должна быть одинаковой высоты на всех остальных. Я думал о некоторых проверках js, но так как есть много событий (фильтры, поиски и т. Д., Все асинхронно, многое можно покрыть с помощью js).

Есть идеи по CSS решениям? Посмотрел CSS-решение flexbox, но, похоже, оно не подходит для такого большого количества слоев контента в статье. Любые предложения, возможные решения или ссылки очень помогли бы. Спасибо вперед!

Answer 1

Заключите статьи в div, а затем используйте flex box. Затем используйте свойства flex-box-grow и flex-box-shrink для элементов

Answer 2

Это то, что вы ищете? http://jsfiddle.net/swm53ran/91/

<div class="content">
    Here is some content
</div>
<div class="content">
    Here is some content<br/>
    Here is some content<br/>
    Here is some content
</div>  



$(document).ready(function() {
    var height = 0;
    $('.content').each(function() {
        if (height < $(this).height()) {
            height = $(this).height();
        }
    });  
    $('.content').each(function() {
        $(this).height(height);
    });
});

Answer 3

Здесь у вас есть хорошая статья на эту тему с разными подходами.

Мне нравится One True Layout Method:

HTML:

<div id="one-true" class="group">
  <div class="col">
    <h3>I am listed first in source order.</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
      amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>

CSS:

#one-true { overflow: hidden; }
#one-true .col {
    width: 27%;
    padding: 30px 3.15% 0; 
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */

демонстрация