如何使網格響應重疊的內容

你好，我已經爲我的網站做了一個網格，我遇到的問題是網格重疊的頁腳元素我一直在嘗試一切從設置網格容器到高度自動看看它是否自動調整我不能給它一個集高度的網站響應，將不勝感激附加任何幫助網格:)如何使網格響應重疊的內容

<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

如何使網格響應重疊的內容

回答

相關問題