동일한 높이의 내부 div와 float : left를 동시에 달성하는 방법은 무엇입니까?

4 개의 내부 div가있는 4 개의 컨테이너가 있고 자동 높이로 왼쪽에 떠있었습니다.

<div class="box">
    <div class="head">
        Heading text
    </div>
    <div class="image">
        Image
    </div>
    <div class="text">
        Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
    </div>
    <div class="link"><a href="#">Link text</a></div>

.box{
    width: 150px;
    float: left;
}

jsFiddle 완료 : http://jsfiddle.net/H8w32/

내부 div의 높이를 네 컨테이너 모두에서 동일하게 만들기 위해 플로팅 레이아웃을 변경하고 대신 display : table을 사용했습니다.

<div class="table">
    <div class="row head">
        <div class="cell">Heading text</div>
        <div class="cell">Here is a lot longer heading text to examplify</div>
        <div class="cell">Heading text</div>
        <div class="cell">Heading text</div>
    </div>
    <div class="row image">
        <div class="cell">Image</div>
        <div class="cell">Image</div>
        <div class="cell">Image</div>
        <div class="cell">Image</div>
    </div>
    <div class="row text">
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante. Dapibus posuere velit aliquet.</div>
        <div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
    </div>
    <div class="row link">
        <div class="cell"><a href="#">Link text</a></div>
        <div class="cell"><a href="#">Link text</a></div>
        <div class="cell"><a href="#">Link text</a></div>
        <div class="cell"><a href="#">Link text</a></div>
    </div>
</div>

-

.table{
display: table;
}

.row{
    display: table-row;
}

.cell{
    display: table-cell;
    width: 150px;
}

http://jsfiddle.net/Wh7Pm/1/

이것은 내가 원했던 것과 똑같아 보입니다. 하지만 이제 저는 float를 사용하여 특전을 잃었습니다. 특히 컨테이너를 더 추가하고 자동으로 다음 "행"으로 푸시되거나 뷰포트가 너무 작아서 새 행으로 푸시되는 기능을 잃었습니다. display : table 레이아웃에 컨테이너를 더 추가하면 컨테이너가 동일한 "행"에 추가됩니다.

이것이 해결할 수 있습니까? display : table (제목 div 및 텍스트 div의 동일한 높이) 및 float : left의 동작을 원합니다.