关于html布局问题。 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

关于html布局问题。

2016-06-22 17:05:44 1774 1

我给外层的设置了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;}
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:45:47

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

    body{
        min-width: 960px;/*你需要的宽度*/
    }
    0 0
相关问答

1

回答

在HTML中,表示页面背景的是<body bgcolor=>。这种说法对吗?

2021-11-22 23:12:17 385浏览量 回答数 1

1

回答

在HTML中,表示页面背景的是哪个呢?

2021-10-29 20:20:14 167浏览量 回答数 1

1

回答

HTML-更改\更新页面内容而无需刷新\重新加载页面?mysql

2020-05-17 11:39:30 302浏览量 回答数 1

2

回答

html 跳转页面 js代码怎么写

2018-05-10 19:59:58 1081浏览量 回答数 2

1

回答

chrome firefox 什么插件能检测HTML页面标签错误具体情况,比如<span></spam>,后面的标签写错了,插件马上就能标注

2016-06-15 11:22:21 1957浏览量 回答数 1

1

回答

HTML5 手机页面 输入表单被键盘遮挡住了

2016-06-07 09:35:21 2792浏览量 回答数 1

1

回答

问 如何在html页面动态生成图片然后分享至微博?

2016-05-30 13:21:07 2108浏览量 回答数 1

1

回答

html页面查询效率低下是什么原因?

2016-03-16 09:01:35 1651浏览量 回答数 1

1

回答

asp,net 如何读取html文件并显示在页面上?html文件地址是从数据库查询得到的?

2016-03-13 08:23:40 2673浏览量 回答数 1

1

回答

HTML设置页面内部的特定目标的链接

2016-03-13 13:15:29 1909浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载