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

Answer 2

试试这个CSS：

.post{
    margin:0px 0px 25px 0px;
    padding:0px 0px 15px 0px;
    display: table;
}

.post .date{
    font-size:18px;
    margin:0px 25px 0px 25px;
    line-height:22px;
    text-align:center;
    display: table-cell;
    padding-right: 10px;
}

.post-info{
    width:780px;
    display: table-cell;
}

Answer 3

您可以从

修改.post h2课程

.post h2 {
    font-size:20px;
    line-height:24px;
}

到

.post h2 {
    font-size:20px;
    line-height:24px;
    padding-left: 75px; /*added this*/
}

Answer 4

我建议改用百分比。您设置容器post的宽度，然后将post-info的宽度设置为最大宽度减去日期div的宽度。

<强> JSFiddle exmaple

.post{
    margin:0px 0px 25px 0px;
    padding:0px 0px 15px 0px;
    width: 780;
}

.post-info{
    width: calc(100% - 100px);
    float: left;
}

Answer 5

只需在右侧div添加样式“display：inline-block”
像这样http://jsfiddle.net/A9wW2/

.post-info{
width:780px;
    display:inline-block;
}

如何像上面的2个div一样清除第三个div？

5 个答案: