如何使网格响应重叠内容
[英]How to make grid Responsive Overlapping Content
问题描述
Hello there i have made a grid for my website and the issue I am having is the grid overlaps the footer element I have been trying everything from setting the grid container to height Auto to see if it automatically adjusts I can't give it a set height as the website is responsive any help would be appreciated attached is my HTML and CSS code for the grid :)
你好，我已经为我的网站制作了一个网格，我遇到的问题是网格与页脚元素重叠我一直在尝试从设置网格容器到高度自动的所有内容，以查看它是否自动调整我不能给它一个集合高度，因为网站是响应式的，任何帮助都将不胜感激，附加的是我的网格的 HTML 和 CSS 代码:)
<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>
Here is code from main styles for all pages这是所有页面主要样式的代码
.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 Queries媒体查询
@media screen and (max-width:928px){
div.Grid1 {
width:308px;
margin:0 auto;
}
}
@media screen and (max-width:487px){
div.Gallery1{
width:100%;
}
2 个解决方案
解决方案1
0 2017-07-07 10:11:48
just add float left to your footer and width 100%只需将浮动添加到您的页脚和宽度 100%
footer{
width:100%;
float:left;
}
解决方案2
0 2017-07-08 08:16:07
so I solved the issue I was having myself here is the snippet of code to where I solved the issue I basically had to recode my footer and added a height dimension to solve the issue if anyone is having this issue hope it helps :)所以我解决了我在这里遇到的问题是我解决问题的代码片段我基本上必须重新编码我的页脚并添加一个高度尺寸来解决这个问题如果有人遇到这个问题希望它有帮助:)
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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.