Html 在底部放置一个类似Pintetest的div
我正在尝试在我的页面中使用类似pinterest的布局。每个用户的帖子都放在一个div中。在一个简化的表单中,布局如下所示Html 在底部放置一个类似Pintetest的div,html,css,Html,Css,我正在尝试在我的页面中使用类似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">P
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),如何解决这个问题?为元素设置一个宽度。