html - 在列表中显示产品。如何在底部放置 100% 的分页 div？

Question

看看我的 JsFiddle(下面也发布了代码):http://jsfiddle.net/zsy0anso/2/

我的产品显示在 div 中，我希望在显示所有产品后显示宽度为 100% 的分页 div。怎么办？

<div class="product">product</div>
<div class="product">product</div>
<div class="product">product</div>
<div class="product">product</div>
<div class="product">product</div>
<div class="product">product</div>
<div class="product">product</div>
<div class="pagination">pagination</div>

.product:before {
    border-right: 1px solid #d2d2d2;
    content:    "";
    height: 315px;
    margin-left:    0;
    margin-top: -15px;
    position:   absolute;
    width:      208px;
    z-index: -1;
}

.product:after {
    content : "";
    position: absolute;
    width:      210px;
    top: 0;
    left: 0;
    border-top: 1px solid #d2d2d2;
}

.pagination {
    /* How do I "clear" this div, place it below so I can display an pagination? */
}

亲切的问候 约翰

Answer 1

将此添加到您的 CSS

.pagination {
    clear:both; float:none
}