缩小到移动屏幕时，页脚中容器内的内容会重叠 [英] Content within container in footer overlaps when reduced to mobile screen

问题描述

我在我的Footer中创建了一个有三列的容器。当调整为小于600像素时，Div会显示在彼此之上。

这里是代码：

HTML ：

 < footer> 
< div class =footwrap> 
< div class =footleft> 
< h2> Far East Festival Ltd< / br>< / h2> 
< div class =subhead> 
注册地址：< / br>< / div> 
 3 Bina Court，< / br> 
 2 Rickmansworth Road，Northwood，< br> 
伦敦，英国< br> 
 HA61HA< / br> 
< div class =subhead>电话：< br>< / div> 
（[phone]< br> 
< div class =subhead>电子邮件：< br>< / div> 
 [e-mail]< br> 
< / div> 
< div class =footcenter> 
< h2>我们的赞助商< / h2> 
即将推出< br>< br> 
< a href =http://fareastfestival.com/get-involved.html>成为赞助商< / a> 
< / div> 
< div class =footright> 
< h2>社交媒体< / h2> 
要找到最新的#FEF新闻，请关注我们：< 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/fareastfesttarget =_ blank>< img src =facebook.png/>< / a> 
< a href =https://twitter.com/Fareastfestivaltarget =_ 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/fareastfesttarget =_ blank> < img src =instagram.png/>< / a> 
< / div>< br> 
 #FarEastFest＃FEF2016 
< / div> 
< / div> 
< / footer> 
  

CSS：

 code> @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查看
解决方案
 
  @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; 
} 
} 
  
 
I've created a container within my Footer with three columns. When re-sized to below 600px, the Divs display on top of each other. I'd like for the content to be displayed one after another?

Here is the code:

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>
([phone]<br>
<div class="subhead">Email:<br></div>
[e-mail]<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;
}
}
Any ideas what I can do?

See www.fareastfestival.com to view
解决方案
@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;
  }
}


                        
这篇关于缩小到移动屏幕时，页脚中容器内的内容会重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！