Question

出于某种原因，如果您使用浏览器窗口并将其调整为1/2或1/4，则页面上的页脚项目会被压缩并且全部搞乱。

Example:

页脚代码：

<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

您目前拥有的img元素是ul的子元素。除li为ul的孩子外，其他任何内容都无效。

您还使用了已弃用的center标记和无偿数量的内联css。首先，我建议重新构建您的页脚，使其成为有效的HTML。

接下来，您应该将overflow:hidden; CSS规则用于让孩子从容器内部溢出的元素，这就是您要描述的问题。

Answer 2

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

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

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

2 个答案: