开发者社区> 问答> 正文

关于html布局问题。

我给外层的设置了width:100%;浏览器最大化的时候没有问题,只要缩小浏览器外层的div就缺了一块不知道为什么。(抱歉,本来想用runjs分享代码,但是今天怎么进不去runjs。)
screenshot

  <footer>
     <div class="footer">
        <div class="left">
           <ul>
             <li><a href="#">综合要闻</a></li>
             <li><a href="#">图片新闻</a></li>
             <li><a href="#">典型案例</a></li>
             <li><a href="#">视频播报</a></li>
           </ul> 
           
          <ul>
          <li><a href="#">扫黄打非</a></li>
          <li><a href="#">政策法规</a></li>
          <li><a href="#">执法动态</a></li>
          <li><a href="#">曝光台</a></li>
         </ul>
          
         <ul>
          <li><a href="#">队伍建设</a></li>
          <li><a href="#">办案指南</a></li>
          <li><a href="#">工作研讨</a></li>
        </ul>
        </div> 
       
         <img src="Images/yakeshilogo.png"/> 
         <img src="Images/erweima.jpg" width="74px" height="74px" class="weixing">
       
          <ul class="sao">
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信扫一扫</li>
            <li>关注官网微信公众号</li>
           </ul>
         </div> 
     </footer>  
     <div class="clear"></div><!--------------清除浮动------------------>
    <div class="bottom">
         <ul>
           <li>版权所有:牙克石文化市场综合执法大队&nbsp;&nbsp;&nbsp;|</li>
           <li>地址:牙克石市胜利西街1号 &nbsp;&nbsp;&nbsp;|</li>
           <li>举报电话:0470-7309292 12318&nbsp;&nbsp;&nbsp;|</li>
           <li>备案编号:蒙ICP备16001653号&nbsp;&nbsp;&nbsp;|</li>
           <li>邮编:022150&nbsp;&nbsp;&nbsp;|</li>
           <li>copyright©2016 牙克石文化执法</li>
        </ul>
     </div>

css

.footer{ width:1200px; height:130px; margin:0 auto; }
.left{ width:500px; height:130px; float:left;  }
.left ul{ float:left;}
.left ul a{ display:block; width:100px; margin-top:13px; color:#c3c6cb;} 
.left ul li{ margin-left:40px; }
.footer img{ float:left; margin-top:45px; margin-left:-50px;}
.footer .weixing{ margin-top:30px; margin-left:100px; }
.footer .sao{ padding-top:45px;  width:150px; float:left; margin-left:26px; color:#c3c6cb;}
.footer .sao li:nth-child(1){ background:url(../Images/wechat.png) no-repeat;}
.bottom{ width:100%; height:50px; background:#262a2d;}
.bottom ul{ width:1300px; height:25px; margin:0 auto; }
.bottom ul li{ float:left; color:#cfcfcf; margin-left:10px; line-height:50px;}

展开
收起
杨冬芳 2016-06-22 17:05:44 2097 0
1 条回答
写回答
取消 提交回答
  • IT从业

    因为body的宽度一直和浏览器窗口大小一致,浏览器缩小后body的宽度变窄,那个footer的宽度100%是和body一致,所以footer会变窄。
    给body设置min-width

    body{
        min-width: 960px;/*你需要的宽度*/
    }
    2019-07-17 19:45:47
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载