Html 如何使网格响应重叠内容

您好，我已经为我的网站做了一个网格，我遇到的问题是网格与页脚元素重叠。我一直在尝试各种方法，从设置网格容器到自动调整高度，看它是否自动调整。我不能给它一个设置的高度，因为网站响应速度快。请提供帮助。附件是我的HTML和CSS代码对于网格：）

媒体查询

    @media screen and (max-width:928px){
   div.Grid1 {
   width:308px;
   margin:0 auto;
   }

   }

   @media screen and (max-width:487px){
   div.Gallery1{
   width:100%;
   }

---

只需在页脚左侧添加浮动，宽度为100%

footer{
width:100%;
float:left;
}

---

所以我解决了我自己遇到的问题这里是我解决问题的代码片段我基本上必须重新编码我的页脚并添加高度维度来解决问题如果有人遇到这个问题希望它有帮助：）

---

您需要将

float:left

设置为

div

，您好，您指的是哪个div:）网格、标题，类似重叠的内容当我将float left添加到像标题这样的内容时，网格使内容不居中对齐可能有助于您在环境中打开代码以了解我的意思：）好的，只需删除

float:left

并添加

display:inline block

和更小的设备使用

display:block

嘿，我尝试了您的建议，页脚确实位于页面底部，但是内容仍然略微重叠，当我调整浏览器窗口的大小，网格面板变成一行（通过媒体查询）时，内容与页脚完全重叠：）我真的在绞尽脑汁想弄明白：（对于内容重叠，根据您的重叠添加页脚样式的marting top或padding top我需要您的媒体查询样式来检查您的问题并解决它。编辑您的问题并添加媒体查询CSI将您的媒体查询添加到我的文件中，这对我来说很好，只需将我上面的css代码放在您的媒体查询之前。嘿，我已经尝试了您的建议我还添加了我的浏览器的图像，向您展示了实际发生的事情。我真的无法理解这一点：）我尝试了high auto，但没有任何改变：）

    @media screen and (max-width:928px){
   div.Grid1 {
   width:308px;
   margin:0 auto;
   }

   }

   @media screen and (max-width:487px){
   div.Gallery1{
   width:100%;
   }

footer{
width:100%;
float:left;
}

    Footer{
    width: 100%;
   height: 76px;
 background-color:#404040;
 margin-top: 76px;
}
.footer-nav{
width:403px;
height: 21px;
position: relative;
 margin-top: 25px;
 margin-left:10px;
}
.footer-nav ul li{
display: block;
 float: left;
 padding-left:15px;
 padding-right:15px;
}
.footer-nav ul li a{
text-decoration: none;
color:white;
font-family:monospace;
font-size: 14px;
}