Question

看看我的JsFiddle（下面也发布的代码）：http://jsfiddle.net/zsy0anso/2/

我有以div显示的产品，我想要一个宽度为100％的分页div：显示所有产品后显示100％。怎么样？

<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
}

Answer 2

尝试添加clear：both;到.pagination

CSS

.product {
    float: left;
    position: relative;
    width: 194px;
    padding: 30px 30px 10px 15px;
    margin-bottom: 15px;
    z-index: 1;
    height: 290px;
    overflow: hidden;
}

.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 {
    clear: both; 
    width: 100%;
}

HTML

<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>

Example

Answer 3

只需将clear:both添加到.pagination。

JSfiddle

在列表中显示产品。如何在100％的底部放置一个分页div？

3 个答案: