在Pintetest樣佈局的底部放置一個div

我試圖在我的頁面中使用pinterest般的佈局。用戶放置在div中的每個帖子。在一個簡單的形式，佈局看起來像這樣在Pintetest樣佈局的底部放置一個div

Post with 11 likes Post with 4 likes  Post with 1 likes 
Post with 9 likes  Post with 2 likes

這是我用於支付Pinterest的CSS的，對HTML：

<div class="container"> 
<div class="post">Post1</div> 
<div class="post">Post2</div> 
<div class="post">post3</div> 
</div>

和CSS;

.container{ 
column-count: 4; 
    column-gap: 10px; 
    margin:0 auto; 
    padding:10px; 
} 

.post { 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 220px; 

}

因爲我有多個頁面，所以我希望在頁面底部放置頁碼（這是指向其他頁面的鏈接）。換句話說，我想要的佈局是這樣的：

Post with 11 likes Post with 4 likes  Post with 1 likes 
Post with 9 likes  Post with 2 likes 

        page:1 2 3 4 5 6 7 8

我用下面的CSS：

#bottom{ 
position:fixed 
bottom: 0; 
display:inline-block; 
}

的問題是，實際的結果是這樣的：

Post with 11 likes Post with 4 likes  Post with 1 likes 
Post with 9 likes  Post with 2 likes  Page:1 2 3 4 5 6 7

後我添加更多帖子，它變成這樣：

Post with 20 likes Post with 7 likes  Post with 1 like 
Post with 11 likes Post with 4 likes  Page:1 2 3 4 5 6 7 
Post with 9 likes  Post with 3 likes  
Post with 8 likes  Post with 2 likes

這是因爲頁面正好在「有1個帖子的帖子」下方認爲是該頁面的底部。如何將我的頁碼放在頁面底部，而不是在特定的文章下方？

謝謝你們我解決了我的問題！我申請position：fixed來將所有的頁碼放在底部，但所有的數字都擠在一起，因爲我在php for循環中顯示數字。現在我將底層元素放在for循環之外並解決了問題。

來源

2017-05-11 gravition

哪裏是你'＃底部的元素？請給我們一個工作演示，告訴我們您現在的問題。 –

哦，這可能是因爲你在'位置：固定' –

底部元素後面缺少分號

– gravition

這是粘性頁腳上的manual。

您的代碼也應該可以工作，但聽起來並不像position: fixed就是您想要的......它只會固定屏幕底部的div而不管滾動。

也，display: inline-block和position: fixed一起沒有意義。失去前者。

如果你只是想股利是在所有的休息，不一定在頁面的底部，只是把它封裝了帖子的div，並給一個display: block

來源

2017-05-11 20:37:50 Dotan

在Pintetest樣佈局的底部放置一個div

回答

相關問題