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>

基本上，这就是我的文章视图中的内容。有主要的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放弃一行非常重要。我不能在不使用浮点数的情况下.next与.prev对齐，它会向下移动一行。所以问题可能在em，但我不确定。

如果有上一篇和下一篇文章，它就像一个魅力。如果只有之前的文章也很完美，那么，如果只有下一篇文章，.next将无法正确对齐。

有关实际示例，请查看此page的底部。

Answer 1

你的问题是你的.pagination课程没有清除只有一个浮动的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

希望这有帮助，祝你好运！

Answer 2

float会将元素浮出父级的“内部”维度，这意味着在计算父级的大小时不会考虑其大小。

您可以在两侧使用display:inline-block，并在只有一侧时使用虚拟span：

http://jsfiddle.net/WR6cy/

<!-- when both sides present -->
<div class="pagination">
    <span class="prev">
        <em>Previous Article</em>
        <a href="#">Previous Title</a>
    </span>
    <span class="next">
        <em>Next Article</em>
        <a href="#">Next Title</a>
    </span>
</div>

<!-- when only prev side presents -->
<div class="pagination">
    <span class="prev">
        <em>Previous Article</em>
        <a href="#">Previous Title</a>
    </span>
</div>

<!-- when only next side presents, use a dummy prev side to "push" the next -->
<div class="pagination">
    <span class="prev">
    </span>
    <span class="next">
        <em>Next Article</em>
        <a href="#">Next Title</a>
    </span>
</div>

.prev {
    width: 49%;
    display: inline-block;
}
.next {
    width: 49%;
    text-align: right;
/*    float: right;*/
    display:inline-block;
}

修改：

要使用当前的PHP实现此目的，您可以稍微将其修改为：

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

缺少相关元素时浮动对象的行为

2 个答案: