html - 如何清除上面 2 个 div 中的第三个 div？

Question

这就是我要解决的...

<div class="post">

    <div class="date">
        <div class="day">01</div>
        <div class="month">Jan</div>
    </div>

    <div class="post-info">
    <h2><a href="#">Donec commodo et justo ac bibendum. Lorem ipsum dolor sit ametit</a></h2>
    </div>

</div>

<div class="post">

    <div class="date">
        <div class="day">01</div>
        <div class="month">Jan</div>
    </div>

    <div class="post-info">
    <h2><a href="#">Donec commodo et justo ac bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h2>
    </div>

</div>

        <div class="post">

            <div class="date">
                <div class="day">01</div>
                <div class="month">Jan</div>
            </div>

            <div class="post-info">
            <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mi tellus, at venenatis justo fermentum at. Ut sed nulla leo. Quisque pulvinar massa ut velit porttitor imperdiet. Ut sit amet sollicitudin lacus, at tincidunt mauris. Donec commodo et justo ac bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mi tellus, at venenatis justo fermentum at. Ut sed nulla leo. Quisque pulvinar massa ut velit porttitor imperdiet. Ut sit amet sollicitudin lacus, at tincidunt mauris. Donec commodo et justo ac bibendum. </a></h2>
            </div>

        </div>

http://jsfiddle.net/kaZ6H/1/

我希望第 3 个 div 的内容像这样被清除 http://i.imgur.com/dRxLTrI.jpg

我不想为元素应用高度。还有其他方法可以实现吗？

Answer 1

你可以给 div 一个表格单元格的显示:

.date, .post-info {
    display:table-cell;
}

jsFiddle example