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

你好，我已经为我的网站做了一个网格，我遇到的问题是网格重叠的页脚元素我一直在尝试一切从设置网格容器到高度自动看看它是否自动调整我不能给它一个集高度的网站响应，将不胜感激附加任何帮助网格:)如何使网格响应重叠的内容

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

这里我的HTML和CSS代码是从主风格代码

所有页面

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

Photo of Footer Issue

来源

2017-07-07 Harrison Forde

你需要设置'浮动：左'到'div'， –

嗨你指的是什么div :) –

网格，标题，像重叠 –

只需添加浮动留给你的页脚和宽度100％

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

来源

2017-07-07 10:11:48

嘿我尝试了你的建议和页脚确实去页面的底部，但内容仍然略有重叠，当我调整浏览器窗口的大小和网格面板变成一行（通过媒体查询）的内容重叠页脚完全:)努力让我的头轮：（ –

为内容重叠添加嘲讽顶部或填充页脚在页脚样式根据您的重叠 –

我需要您的媒体查询样式来检查您的问题并解决它。问题和添加媒体查询css –

所以我解决了我在这里有自己的问题是代码，我解决了这个片断的问题我基本上不得不重新编码我的页脚，并增加了一个高度尺寸来解决这个问题，如果有人有这个问题，希望它有帮助:)

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

来源

2017-07-08 08:16:07

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

回答

相关问题