css - 缺少相关元素时 float 对象的行为

Question

<div class="pagination">
    <?php if($page->hasPrevVisible()): ?>
    <span class="prev">
        <em>Previous Article</em>
        <a href="<?php echo $page->prevVisible()->url() ?>"><?php echo $page->prevVisible()->title() ?></a>
    </span>
    <?php endif ?>

    <?php if($page->hasNextVisible()): ?>
    <span class="next">
        <em>Next Article</em>
        <a href="<?php echo $page->nextVisible()->url() ?>"><?php echo $page->nextVisible()->title() ?></a>
    </span>
    <?php endif ?>  
</div> 

基本上，这就是我文章 View 中的内容。有一个主要的 div，这对本例和其中的两个跨度无关紧要。当没有我们上一篇文章的下一篇时，该选项不会出现。现在到 CSS:

.pagination em {
font-family: Arvo;
font-size: .8em;
font-style: normal;
text-transform: uppercase;
display: block;
color: #838383;
}

.prev {
width: 49%;
display: inline-block;
}

.next {
width: 49%;
text-align: right;
float: right;
}

我已经包含了 .pagination em，因为将 display:block 放在那里以放下一行对我来说真的很重要。如果不使用 float，我无法使 .next 与 .prev 对齐，它向下一行。所以也许问题出在 em 中，但我不确定。

如果有上一篇和下一篇文章，它就像一个魅力。如果只有上一篇文章，它也能很好地站立，但是，如果只有下一篇文章，.next 将不会正确对齐。

一个实际的例子，请看这个page的底部.

Answer 1

您的问题是您的 .pagination 类没有清除，其中只有一个 float 的 div。

如果您只是将 overflow: auto; 添加到 CSS 中的 .pagination 类，它应该可以解决问题。

.pagination {
    padding: 1.25em 0px;
    font-size: 0.8em;
    line-height: 1.2em;
    border-bottom: 0.07143em solid rgb(55, 185, 81);
    font-family: "Elena Web",Georgia;

    overflow: auto;
}

示例:http://cssdesk.com/q2h4U

希望这对您有所帮助，祝您好运!