динамическая высота тега изделия

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> 

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

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

Answer 1

Заключите статьи в дивы, а затем использовать гибкую форму. Затем используйте свойства flex-box-grow и flex-box-shrink на предметах

Answer 2

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

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

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 */ 

demo

Answer 3

Это то, что вы ищете? 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); 
    }); 
});