元素被卡在一页的顶部[关闭]

Question

关闭。此问题需要debugging details。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

关闭30分钟前。

页脚位于我的主页和表单页面的底部。但是某些原因导致页脚出现在“图库”页面的顶部。我假设这是特定性问题或我的选择器之一。但是我对此并不陌生，到目前为止，我尝试过的所有方法都无法解决问题。

我的页脚代码是基本的，因此必须强制其他代码到顶部。我检查了Gallery ID，它们似乎都没有影响我的页脚元素。

footer {
background:#333333;
color:#FFFFFF;
padding:10px;
}

/* || gallery-items */
.gallery-item {
 text-align:center;
 width:300px;
 height:300px;
 margin:10px;
 background-color:#ADD8E6;
 border:10px solid #333333;
 border-radius:4px;
 float:left;
 object-fit:contain;
 }

 /* || gallery item hover */
 .gallery-item:hover {
 border-color:#03A9FC;
 }

Here is a link to my Replit.我很抱歉无法评估问题的根源。这是我进行CSS样式设计的第一周。

Answer 1

您的.gallery-item具有float: left;，这意味着当在页面上呈现其他元素时，这些元素不会被“认为”占用任何空间。您可以在图库和页脚元素之间放置样式为div的clear: both（在您的情况下，仅clear:left可用）以解决此问题

Answer 2

在overflow: hidden;上添加#gallery-content

#gallery-content{
  overflow: hidden;
}