html - 当缩小到移动屏幕时，页脚中容器内的内容重叠

Question

我在页脚中创建了一个包含三列的容器。当调整到 600px 以下时，Divs 显示在彼此之上。我希望内容依次显示？

代码如下:

HTML:

<footer> 
<div class="footwrap">
<div class="footleft">
<h2>Far East Festival Ltd</br></h2>
<div class="subhead">
Registered Address: </br></div>
3 Bina Court, </br>
2 Rickmansworth Road, Northwood,<br> 
London, United Kingdom <br>
HA61HA</br>       
<div class="subhead">Tel:<br></div>
(+44) 07415135072<br>
<div class="subhead">Email:<br></div>
info@fareastfestival.com<br>     
</div>
<div class="footcenter">
<h2>Our Sponsors</h2>
Coming Soon<br><br>
<a href="http://fareastfestival.com/get-involved.html">Become a Sponsor</a>
</div>
<div class="footright">
<h2>Social Media</h2>
To find out the latest #FEF news, follow us on: <br>
<div class="subhead">Twitter:</div> @Fareastfestival<br>
<div class="subhead">Facebook:</div>/fareastfest<br>
<div class="subhead">instagram:</div>@fareastfest <br>
<div class="subhead">Pinterest:</div>fareastfestival<br><br>
<div id="socialfoot">        
<a href="https://www.facebook.com/fareastfest" target="_blank"><img     src="facebook.png" /></a>
<a href="https://twitter.com/Fareastfestival" target="_blank"><img src="twitter.png" /></a>
<a href="https://uk.pinterest.com/fareastfestival/" target="_blank"><img src="pinterest.png" /></a>
<a href="https://instagram.com/fareastfest" target="_blank"> <img src="instagram.png" /></a>
</div><br>
#FarEastFest #FEF2016
</div>
</div>  
</footer>

CSS:

@media (max-width: 600px) {
footer {
width: 100%;
clear: both;
text-align: center;
font-family: raleway;
font-size: 90%;
font-style: normal;
color: black;
font-variant: normal;
padding: 40px 0px;
background-color: lightgrey;}
.footwrap {
width: 100%;
display: block;
}
.footleft {
text-align: center;
width: 100%;
position: none;
top: none;
}
.footcenter {
text-align: center;
width: 100%;
padding: 0;
position: none;
top: none;
}
.footright {
text-align: center;
width: 100%;
padding: 0;
position: none;
top: none;
}
}

有什么想法吗？

访问 www.fareastfestival.com 查看

Answer 1

@media (max-width: 600px) {
  footer {
  width: 100%;
  clear: both;
  text-align: center;
  font-family: raleway;
  font-size: 90%;
  font-style: normal;
  color: black;
  font-variant: normal;
  padding: 100px 0px;
  background-color: lightgrey;}

  .footwrap {
    width: 100%;
    display: block;
  }

  .footleft {
   text-align: center;
   width: 100%;
   position: relative;
   top:22px;
  }

  .footcenter {
   text-align: center;
   width: 100%;
   padding: 20;
   position: relative;
   top:22px;
  }

  .footright {
   text-align: center;
   width: 100%;
   padding: 20;
   position: relative;
   top:22px;
  }
}