Question

我正在为Uni制作一个基本的响应式网站。我今天只是打下了一个基础，因为我有大约7个星期来完成这个，但我遇到了我的第一个障碍。

最终我需要在这个网站上使用CSS网格布局图像，所以我想我现在只用CSS列测试它，直到我知道如何网格：）

长话短说，我的专栏的内容是在页脚的后面，在最后一小时，我尝试了各种各样没有运气我想我知道问题在哪里我只是不知道如何解决它。出于某种原因，一旦我打开我的标签列，身体立即结束。

此外，中心html标签最终会被删除，但我正在努力解决CSS问题我有这种感觉我需要一个包装器来放置所有内容吗？

这看起来有点丑陋，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>

Answer 1

我不确定我是否正确理解了你的需求。如果你需要的只是覆盖页脚的内容，那么应该这样做：

<强>已更新

首先，您需要清除浮动子节点中的网格，因此您可以根据需要添加为padding-bottom。

>>> x = input("month: ") + '/' + input("day: ") + '/' + input("year: ")
month: 11
day: 01
year: 2016
>>> x
'11/01/2016'

CSS列内容正在页脚后面消失

1 个答案: