두 열이 마크 업과 동등한 높이

Question

:

<div class="wrapper"> 
    <article>A</article> 
    <article>B</article> 
    <article>C</article> 
    <article>D</article> 
    <article>E</article> 
    <article>F</article> 
</div> 

가 어떻게해야 할 스타일을 할 수 있습니까? C의 내용은 다음 이상 D입니다 D이 C의 높이와 일치해야하는 경우 높이가 더 이상 내용이있는 기사, 즉에서 와야한다.

내가 지금까지 시도한 것은 훌륭한 오래된 플로트이지만, 플로트 된 이후 내용에 따라 가변 높이가 있습니다.

나는 비슷한 것들을 봤어.하지만 나는 여분의 내용을 숨기고있는 고정 높이의 열을 발견했다.

function equalHeight(group) { 
    var tallest = 0; 
    group.each(function() { 
     var thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
      tallest = thisHeight; 
     } 
    }); 
    group.height(tallest); 
} 


$(document).ready(function() { 
    equalHeight($(".recent-article")); 

}); 

가 // HTML WORL 것에 대한

Answer 1

를 사용하여 동일한 높이의 기능은

<div class="wrapper"> 
    <article class="recent-article">A</article> 
    <article class="recent-article">B</article> 
    <article class="recent-article">C</article> 
    <article class="recent-article">D</article> 
    <article class="recent-article">E</article> 
    <article class="recent-article">F</article> 
</div> 

Answer 2

더 나은이를 위해 테이블에 있습니다. 당신을 해달라고 이유

<div class="wrapper"> 
<table width="100%" cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td> 
      <article class="recent-article">A</article> 
     </td> 
     <td> 
      <article class="recent-article">B</article> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <article class="recent-article">C</article> 
     </td> 
     <td> 
      <article class="recent-article">D</article> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <article class="recent-article">E</article> 
     </td> 
     <td> 
      <article class="recent-article">F</article> 
     </td> 
    </tr> 
    </table>