기사 태그의 동적 높이

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 픽셀. 나는 그것을보다 역동적으로 만들고 높이를 맞추고 싶습니다. 그러나 모든 기사가 디자인 지침에 따라 정렬해야하기 때문에 모든 기사의 높이가 동일해야합니다. 즉, 높이를 265px에서 280px까지 동적으로 조정해야합니다. 한 기사는 다른 모든 기사에서 같은 높이 여야합니다. 몇 가지 j 수표에 대해 생각하고 있었지만 많은 이벤트 (필터, 검색 등 모든 것이 비동기 적이므로 js로 처리하는 것이 많습니다)가 있기 때문에.

CSS 솔루션에 대한 아이디어가 있습니까? flexbox CSS 솔루션을 들여다 보았지만 기사의 수많은 레이어에 잘 적용되지 않는 것으로 보입니다. 제안, 가능한 해결책 또는 링크가 도움이 될 것입니다. 앞으로 감사드립니다!

Answer 1

div로 기사를 묶은 다음 flex 상자를 사용하십시오. 그런 다음 flex-box-grow 및 flex-box-shrink 속성을 사용하십시오.

Answer 2

Here 다른 접근법을 가진 주제에 대한 좋은 기사가 있습니다.

은 내가 진정한 레이아웃 방법을 좋아한다 :

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); 
    }); 
});