【发布时间】：2017-10-19 05:15:38
【问题描述】：
我正在为 Uni 制作一个基本的响应式网站。我今天只是在打基础，因为我有大约 7 周的时间来完成这项工作，但我遇到了第一个障碍。
最终我需要在这个网站上使用 CSS 网格布局来处理图像，所以我想我现在只使用 CSS 列来测试它，直到我知道如何网格化:)
长话短说，我的专栏内容在页脚后面，在过去的一个小时里，我尝试了各种方法，但都没有运气，我想我知道问题出在哪里，只是不知道如何解决它。出于某种原因，只要我打开列的标签，正文就会立即结束。
Center html 标签最终也会被删除，但我在 CSS atm 上苦苦挣扎，我觉得我需要一个包装器来放置所有内容？
这一切看起来有点难看，jQuery 类是幻灯片最终会去的地方，现在只是一个图像。
谢谢
.headerLogo {
max-width: 300px;
display:block;
margin: auto;
}
.jQuery {
margin-bottom: 10px;
min-width: 300px;
display:block;
}
.spacer {
background-color: #a9a9a9;
width:100%;
height:5px;
}
.menu {
width:100%;
background-color: black;
border: 2px;
border-radius: 5px;
text-align: center;
}
li {
list-style-type: none;
font-size: 25px;
display: inline;
background-color: #a9a9a9;
color:white;
padding: 10px;
text-decoration: none;
color: black;
border: 2px solid #F15A24;
border-radius: 5px;
}
li a:hover {
color: white;
}
a:link, a:visited {
color: black;
text-decoration: none;
}
ul {
text-align: center;
padding:0px;
display:inline;
width: 80px;
overflow: hidden;
}
hr {
padding: 20px;
}
footer {
width:100%;
height: 20%;
background-color: gray;
display:block;
}
body {
min-width: 100%;
min-height: 100%;
margin: 0;
background: linear-gradient(#a9a9a9, white);
background-repeat: no-repeat;
}
[class*='col-']
{
float:left;
display: grid;
}
.col-1-3 {
width: 33%;
max-height: 70%;
position:relative;
}
p {
}
.container {
}
.footer {
bottom: 0;
left:0;
position:fixed;
background-color: #ffffff;
height: 10%;
width: 100%;
border-top: 5px solid #F15A24 ;
}
@media (max-width: 750px) {
.jQuery {
visibility:hidden;
}
li{font-size: 15px;}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content= "width=device-width">
<meta name = "description" decription = "Responsive Web Design">
<meta name = "keywords" content = "web design, mobile website, affordable
design, professional website">
<link rel = "stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div>
<img class = "headerLogo" src="img/Logo1.png" >
</div>
</header>
<center>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Portfolio</a></li>
</ul>
</nav>
<img class = "jQuery" src = "img/iphone.png">
</center>
<div class = "grid">
<div class = "col-1-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
ultrices sem vitae suscipit. Donec sollicitudin lacus ac nisl fermentum
eleifend. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Curabitur leo leo, aliquet at varius nec,
laoreet efficitur ligula. Fusce at lacinia tortor. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vivamus scelerisque justo id
interdum placerat. Aenean tincidunt tellus ac eros viverra rhoncus. Nam
vitae sollicitudin magna. Praesent neque tellus, hendrerit et fermentum a,
sagittis at lorem. Proin at pellentesque massa. Suspendisse potenti.
</p>
</div>
<div class = "col-1-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
ultrices sem vitae suscipit. Donec sollicitudin lacus ac nisl fermentum
eleifend. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Curabitur leo leo, aliquet at varius nec,
laoreet efficitur ligula. Fusce at lacinia tortor. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vivamus scelerisque justo id
interdum placerat. Aenean tincidunt tellus ac eros viverra rhoncus. Nam
vitae sollicitudin magna. Praesent neque tellus, hendrerit et fermentum a,
sagittis at lorem. Proin at pellentesque massa. Suspendisse potenti.
</p>
</div>
<div class = "col-1-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
ultrices sem vitae suscipit. Donec sollicitudin lacus ac nisl fermentum
eleifend. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Curabitur leo leo, aliquet at varius nec,
laoreet efficitur ligula. Fusce at lacinia tortor. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vivamus scelerisque justo id
interdum placerat. Aenean tincidunt tellus ac eros viverra rhoncus. Nam
vitae sollicitudin magna. Praesent neque tellus, hendrerit et fermentum a,
sagittis at lorem. Proin at pellentesque massa. Suspendisse potenti.
</p>
</div>
</div>
<div class = "footer">
</div>
</body>
</html>
【问题讨论】：
标签： html css footer breakpoints