javascript - 调整窗口大小时，页脚会压缩

Question

出于某种原因，如果您打开浏览器窗口并将其大小调整为 1/2 或 1/4，我页面上的页脚元素会被压缩并变得一团糟。

链接:http://skipq.net/app/index4.php

页脚代码:

<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/

Answer 1

为了设计您想要的页脚，您必须将所有 5 个框包装在它自己的 div 中，并将其封装在一个 div 中，然后使用内部 div。另外请注意 netinept 的要点..:)

更新 V2.0

<html>
<head>
<link rel="stylesheet" href="style.css"></style>
</head>
<body>
<div id='footer' style="width:1300px;height:50px">
<div class="about" style="width:250px;height:50px;positon:relative;float:left;">
    <ul>
      <li>
          <img title="This is the icon of app, look for it on your app store!" style="margin-left:65px;width:120px;" src="http://skipq.net/app/images/iconq.png">
      </li>
      <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:65px;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>
<div class="links" style="width:250px;height:50px;positon:relative;float:left;">
        <img src="http://skipq.net/app/images/thirdicon.png" width="216" height="91"/>
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.<br /><a target="_top" href="random.php" style="color:blue">Read more</a></li>
        </ul>
     </div>
<div class="links" style="width:250px;height:50px;positon:relative;float:left;">
        <img src="http://skipq.net/app/images/firsticon.png" width="230" height="90">
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.<br /><a target="_top" href="random.php" style="color:blue">Read more</a></li>
      </ul>
    </div>
<div class="links" style="width:250px;height:50px;positon:relative;float:left;">
      <img src="images/Electronics2.png" width="170" height="91">
        <h4>Title Here</h4>
        <ul style="padding:0px;margin:0px;">
          <li>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.<br /><a target="_top" href="random.php" style="color:blue">Read more</a></li>
        </ul>
    </div>
<div class="links" style="width:250px;height:50px;positon:relative;float:left;">
        <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>
    </div>
  </div>
</body>
</html>