页脚项目缩小

出于某种原因，如果您将浏览器窗口调整为1/2或1/4，则页面上的页脚项会变得浓缩并且全部混乱。页脚项目缩小

例子：http://gyazo.com/c1e8d0f77702d597c10c2a0786711545.png

页脚代码：

<footer id='footer'> 
<div class="wrapper"> 
    <div class="about" style="width:20%;"> 
     <h1> 
     <img width="90" height="90" style="margin-left:130px;" title="This is the icon of app, look for it on your app store!" src="images/iconq.png"> 
     </h1> 
    <ul> 
     <li><a target="_top" href="#link"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5d/Available_on_the_App_Store_%28black%29.png" style="margin-left:75px;margin-top:10px;width:120px;" width="100" height="40"></a> 
     </li><br /> 
     <li><a target="_top" href="#link"><img src="http://www.blog.catblogosphere.com/cb-content/uploads/2013/07/google_play_icon.png" style="margin-left:65px;margin-top:10px;width:120px;" width="100" height="40"></a></li> 
    </ul> 
    </div> 
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;"> 
     <center> 
     <img src="images/thirdicon.png" width="216" height="91"> 
     <li style="height:100%;width:75%;"> 
     <h4>Title Here</h4> 
     <ul style="padding:0px;margin:0px;"> 
      <li><?php 
      $text = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!"; 
      if(strlen($text) > '120'){ 
      echo substr($text,0,100)."..."; 
      echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>'; 
      } else { 
      echo $text; 
      } 
      ?></li> 
     </ul> 
    </center> 
     </li> 
    </ul> 
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;"> 
     <center> 
     <img src="images/firsticon.png" width="230" height="90"> 
     <li style="width:75%;"> 
     <h4>Title Here</h4> 
     <ul style="padding:0px;margin:0px;"> 
      <li><?php 
      $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!"; 
      if(strlen($text2) > '120'){ 
      echo substr($text2,0,100)."..."; 
      echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>'; 
      } else { 
      echo $text2; 
      } 
      ?></li> 
     </ul> 
    </center> 
     </li> 
    </ul> 
    <ul class="links" style="height:100%;width:20%;positon:relative;float:left;"> 
     <center> 
     <img src="images/Electronics2.png" width="170" height="91"> 
     <li style="width:75%;"> 
     <h4>Title Here</h4> 
     <ul style="padding:0px;margin:0px;"> 
      <li><?php 
      $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!"; 
      if(strlen($text2) > '120'){ 
      echo substr($text2,0,100)."..."; 
      echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>'; 
      } else { 
      echo $text2; 
      } 
      ?></li> 
     </ul> 
    </center> 
     </li> 
    </ul> 
<ul class="links" style="positon:relative;float:left;"> 
     <li> 
     <h4>Connect With Us</h4> 
     <ul class="external"> 
      <li class="twitter"><img src="images/twitter.png" width="16" height="16"><span class="icon-twitter"></span><a target="_top" href="http://www.twitter.com/SkipQ">Follow us on Twitter</a></li> 
      <li class="facebook"><img src="images/facebook.png" width="16" height="16"><span class="icon-facebook"></span><a target="_top" href="http://www.facebook.com/SkipQ">Find us on Facebook</a></li> 
      <li class="blog"><img src="images/youtube.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Subscribe on Youtube</a></li> 
      <li class="blog"><img src="images/blog.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Read our Blog</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

</div> 
</div> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="container secondary"> 
<br /> 
</div> 
<div class="secondary" style="padding:2px;color:#FFF;background:#1158D4;"> 
    <ul> 
    <li><a style="color:#FFF" href="/help">Help</a></li> 
    <li><a style="color:#FFF" href="/policy">Privacy Policy</a></li> 
    <li><a style="color:#FFF" href="/terms">Terms</a></li> 
    <li>&copy; 2013 SkipQ</li> 
</ul> 
</div> 


</footer>

如果您需要更多的代码，让我知道！我会很乐意给更多:)

的jsfiddle：http://jsfiddle.net/v4vuh/

来源

2013-11-15 user2812028

请小提琴吧...... –

没问题就给我几分钟:) – user2812028

在JSFiddle中它显示了实际的问题。它只适合100％的宽度，当它的页面宽度小于100％时，它不适合，如果你的屏幕分辨率很低，它也不适合。它的奇怪之处在于我没有按像素宽度来做元素，而是通过百分比加起来达到100％。 http://jsfiddle.net/v4vuh/ – user2812028

柜面，如果您有任何疑问..你可以问我。

enter image description here

这里是你的代码..

<footer id='footer'> 
<div class="wrapper"> 
    <div class="about" style="width:20%;"> 
     <h1 style="display:block; text-align:right"> 
     <img width="90" height="90" style="" title="This is the icon of app, look for it on your app store!" src="images/iconq.png"> 
     </h1> 
    <ul> 
     <li><a target="_top" href="#link"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5d/Available_on_the_App_Store_%28black%29.png" style="width:120px;" width="100" height="40"></a> 
     </li> 
     <li><a target="_top" href="#link"><img src="http://www.blog.catblogosphere.com/cb-content/uploads/2013/07/google_play_icon.png" style="width:120px;" width="100" height="40"></a></li> 
    </ul> 
    </div> 
    <ul class="links" style="position:relative;float:left;"> 
     <li><img src="images/Electronics2.png" width="170" height="91"></li> 
     <li> 
     <h4>Title Here</h4> 
     <ul style="padding:0px;margin:0px;"> 
      <li><?php 
      $text = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!"; 
      if(strlen($text) > '120'){ 
      echo substr($text,0,100)."..."; 
      echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>'; 
      } else { 
      echo $text; 
      } 
      ?></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="links" style="position:relative;float:left;"> 
     <li><img src="images/Electronics2.png" width="170" height="91"></li> 
     <li> 
     <h4>Title Here</h4> 
     <ul style="padding:0px;margin:0px;"> 
      <li><?php 
      $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!"; 
      if(strlen($text2) > '120'){ 
      echo substr($text2,0,100)."..."; 
      echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>'; 
      } else { 
      echo $text2; 
      } 
      ?></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="links" style="position:relative;float:left;"> 
     <li><img src="images/Electronics2.png" width="170" height="91"></li> 
     <li> 
     <h4>Title Here</h4> 
     <ul style="padding:0px;margin:0px;"> 
      <li><?php 
      $text2 = "Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing! Just testing!"; 
      if(strlen($text2) > '120'){ 
      echo substr($text2,0,100)."..."; 
      echo '<br /><a target="_top" href="random.php" style="color:blue">Read more</a>'; 
      } else { 
      echo $text2; 
      } 
      ?></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="links" style="position:relative;float:left;"> 
     <li> 
     <h4>Connect With Us</h4> 
     <ul class="external"> 
      <li class="twitter"><img src="images/twitter.png" width="16" height="16"><span class="icon-twitter"></span><a target="_top" href="http://www.twitter.com/SkipQ">Follow us on Twitter</a></li> 
      <li class="facebook"><img src="images/facebook.png" width="16" height="16"><span class="icon-facebook"></span><a target="_top" href="http://www.facebook.com/SkipQ">Find us on Facebook</a></li> 
      <li class="blog"><img src="images/youtube.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Subscribe on Youtube</a></li> 
      <li class="blog"><img src="images/blog.png" width="16" height="16"><span class="icon-youtube"></span><a target="_top" href="http://www.youtube.com/">Read our Blog</a></li> 
     </ul> 
     </li> 
    </ul> 
    <div style="clear:both"></div> 
    </div> 
<div class="container secondary"> 
</div> 
<div class="secondary" style="padding:2px;color:#FFF;background:#1158D4;"> 
    <ul> 
    <li><a style="color:#FFF" href="/help">Help</a></li> 
    <li><a style="color:#FFF" href="/policy">Privacy Policy</a></li> 
    <li><a style="color:#FFF" href="/terms">Terms</a></li> 
    <li>&copy; 2013 SkipQ</li> 
</ul> 
</div> 
</footer>

这是你的CSS ..：

#footer .wrapper 
     { 
      color: #969696; 
      background-color: #B3B3B3; 
      border-top: 1px solid #e1e1e1; 
     } 

     #footer * 
     { 
      font-weight: normal; 
      padding: 0; 
      margin: 0; 
     } 

     #footer li 
     { 
      list-style: none; 
     } 

     #footer h1, #footer h2, #footer h3, #footer h4 
     { 
      color: #5a5a5a; 
     } 

     #footer div.divider 
     { 
      border-top: 1px solid #e1e1e1; 
     } 

     #footer div.about, #footer ul.links 
     { 
      float: left; 
      padding: 0; 
     } 

     #footer div.about 
     { 
      width: 330px; 
      padding-left: 0; 
     } 

     #footer div.about h1 
     { 
      font-size: 17px; 
      font-weight: normal; 
      margin: 0 0 5px; 
     } 

     #footer div.about h1 .comma 
     { 
      font-weight: bold; 
     } 

     #footer div.about h1 .logo 
     { 
      display: inline-block; 
      background: url(/assets/codecademy_logo_smallest-0323fdd409fc100a1991db8aa706f57e.png) no-repeat 0 -2px; 
      height: 30px; 
      width: 105px; 
      margin-right: -5px; 
      text-indent: -9999px; 
     } 

     #footer .secondary ul 
     { 
      margin: 20px 0; 
     } 

     #footer .secondary select.locales 
     { 
      top: 15px; 
      right: 0; 
      width: 120px; 
     } 

     #footer .about li, #footer .secondary li 
     { 
      display: block; 
      border-right: 1px solid #e1e1e1; 
      padding: 0 0px; 
      text-align: right; 
     } 

     #footer .about li:first-child, #footer .secondary li:first-child 
     { 
      padding-left: 0; 
     } 

     #footer .about li:last-child, #footer .secondary li:last-child 
     { 
      padding-right: 0; 
      border-right: none; 
     } 

     #footer ul.links 
     { 
      float: left; 
      border-left: 1px solid #e1e1e1; 
      padding-right: 0; 
     } 

     #footer ul.links > li 
     { 
      display: block; 
      padding: 0 0px 0 0; 
      text-align: justify; 
     } 

     #footer ul.links > li h4 
     { 
      padding: 0 0 15px; 
      font-weight: bold; 
      text-transform: uppercase; 
     } 

     #footer ul.links > li:last-child 
     { 
      padding-right: 0; 
     } 

     #footer .links li li 
     { 
      display: block; 
      margin: 0 0 0px; 
      height: auto; 
     } 

     #footer .links a, #footer .secondary a 
     { 
      color: #787878; 
     } 

     #footer .links a:hover, #footer .links a:hover .arrow, #footer .secondary a:hover, #footer .secondary a:hover .arrow 
     { 
      color: #005580; 
     } 

     #footer .links a .arraow, #footer .secondary a .arraow 
     { 
      margin-right: 5px; 
      color: #08c; 
     } 

     #footer .external li span 
     { 
      margin-right: 5px; 
     } 

     #logo 
     { 
      background-image: url('images/logo.png'); 
     }

最后这里是你的提琴..

Fiddle..

来源

2013-11-15 05:09:03

嗯...我明白你的意思，我已经试过这个，但是我究竟会做什么代码明智的？只需将元素更改为浮动状态即可，例如将左侧的元素更改为蓝色条，然后使用

，然后放置蓝色条。尽管我确实明白你的意思，但并不是100％确定要做什么。 – user2812028

好吧等几分钟..我会修改你的代码。 –

听起来不错:)完成后让我知道！ – user2812028

页脚项目缩小

回答

相关问题