如何制作网格响应重叠内容答案

【问题标题】：How to make grid Responsive Overlapping Content如何制作网格响应重叠内容
【发布时间】：2017-07-07 09:57:37
【问题描述】：

您好，我为我的网站制作了一个网格，我遇到的问题是网格与页脚元素重叠我一直在尝试从设置网格容器到自动高度以查看它是否自动调整我无法给出它是一个设定的高度，因为网站是响应式的

    <html> 
<head> 
<link href="/styles.css" rel="stylesheet" type="text/css">
<link href="/services-styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/aboutus.html">About us</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>    
</div>    
</div>    
<div class="content">
<div class="title logo">
<h1>Logo's</h1>    
</div>

<div class="title">    
<h1>"Just a Glimpse of what we can do for you and your business"</h1>
    </div>
<div class="Grid1">   
<div class="Gallery1">
<a href="Images/logo1.jpg">
<img src="/Images/logo1.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>
<div class="Gallery1">
<a href="Images/logo2.png">
<img src="/Images/logo2.png"style="width:100%; height:100%;">    
    </a>    
    </div>
<div class="Gallery1">
<a href="Images/logo3.jpg">
<img src="/Images/logo3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div> 
    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a> 
    </div>

        <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>     

    </div>
    </div>
    </div>
    <footer>
<div class="Footer-Nav">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/aboutus.html">About us</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>    
</footer>
    </div>
</body>
</html>

这是所有页面主要样式的代码

    .Gallery1{
 margin:5px;
float: left;
width:300px;
height:200px;
position:relative;
border: 1px solid #ccc;
}


.Grid1{
max-width:945px;
position: relative;
height:auto;
margin:0 auto;
margin-top: 25px;
}

div.logo{
 margin-top: 15px;
 text-align: center;
 font-size: 40px;
 font-family: Monospace;
 padding: 5px;

}
div.Gallery1:hover{
border-color:#777;
}
.title{
position: relative;
text-align: center;
margin-top:25px;
font-family: Monospace;
}




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

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

}
.Grid1{
height: auto;
position: relative;
}
.content{
height:100%;
margin: 0;
padding: 0;
position: relative;
}

媒体查询

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

   }

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

【问题讨论】：

你需要将float:left设置为div，
嗨，你指的是什么 div :)
网格，标题，类似重叠
嗨，当我向标题、网格等内容添加左浮动时，它会导致内容不居中对齐，这可能有助于您在环境中启动代码以了解我的意思 :)
好的，只需删除 float:left 并添加 display:inline-block 和较小的设备使用 display:block

标签： html css grid footer responsive

【解决方案1】：

只需将浮动向左添加到您的页脚和宽度 100%

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

【讨论】：

嘿，我尝试了您的建议，页脚确实转到了页面底部，但内容仍然略有重叠，当我调整浏览器窗口的大小并且网格面板变为单行时（通过媒体查询）内容与页脚完全重叠 :) 真的一直在努力让我的头脑清醒:(
对于内容重叠，根据您的重叠添加页脚样式中的 marting-top 或 padding-top
我需要您的媒体查询样式来检查您的问题并解决它。编辑您的问题并添加媒体查询 css
我将您的媒体查询添加到我的文件中，只需将上面的 css 代码放在您的媒体查询之前，它就可以正常工作。
嘿，我已经尝试了你的建议我还添加了我的浏览器的图像，以向你展示实际发生的事情真的无法理解这个:) 我尝试了高自动但什么都没有改变:)

【解决方案2】：

所以我解决了我在这里遇到的问题是我解决问题的代码的 sn-p 我基本上必须重新编码我的页脚并添加一个高度尺寸来解决问题如果有人遇到这个问题希望它帮助:)

    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;
}

【讨论】：