Html 在底部放置一个类似Pintetest的div

我正在尝试在我的页面中使用类似pinterest的布局。每个用户的帖子都放在一个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>

因为我有多个页面，所以我想将页码（指向其他页面的链接）放在页面底部。换句话说，我希望布局如下所示：

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 

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

我使用以下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 8 

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 

这是因为页面认为“post with 1 like”的正下方是页面的底部。如何将页码放在页面底部而不是特定帖子的正下方

谢谢你们，我解决了我的问题！我应用了position：固定地将所有页码放在底部，但是所有的数字都被压缩在一起，因为我在一个php for循环中显示这些数字。现在我将底部元素放在for循环之外，并解决了这个问题

这里有一个关于粘脚的问题

您的代码也应该可以工作，但它听起来不像

position:fixed

是您的目标。。。它将只固定屏幕底部的div，而不考虑滚动

而且，

display:inline block

和

position:fixed

在一起没有意义。失去前者

---

如果您只希望div位于所有其余部分之下，而不一定位于页面底部，那么只需将其从包装文章的div中取出，并给出一个

显示：block

您的

#bottom

元素在哪里？请给我们一个你所拥有的东西的工作演示，这样我们就可以看到当前的问题。哦，这可能是因为你在

位置之后缺少一个分号：fixed

底部元素在感谢之后！添加位置：修复了将其放在底部的问题，现在的问题是所有数字都挤在一个讨厌的点上。（即使我使用的是display:inline block），如何解决这个问题？为元素设置一个宽度。