ask2

html在不同尺寸浏览器窗口中页面排版混乱 财富值20

2016-10-18 17:26发布

站内问答 /
3422 1 6

浏览器放至最大显示没有问题，但是改变浏览器窗口大小，出现混乱

截图如下，出现堆叠：

希望达到的效果如下：

代码：
html

<!DOCTYPE html> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>test</title>     <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">     <link href="deviceData.css" rel="stylesheet">     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="row">     <div class="col" id="a3">首页</div>     <img class="col" id="a_1" src="images/数据管理平台/u38.png">     <div class="col" id="a4">问题</div>     <img class="col" id="a_2" src="images/数据管理平台/u38.png">     <div class="col" id="a5">专栏</div>     <img class="col" id="a_3" src="images/数据管理平台/u38.png">     <div class="col" id="a6">用户</div>     <img class="col" id="a_4" src="images/数据管理平台/u38.png">     <div class="col" id="a7">特色</div>     <img class="col" id="a_5" src="images/数据管理平台/u38.png">     <div class="col" id="a8">在线客服</div> </div> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>

css

.row {     background-color: rgba(51, 51, 51, 1);     height: 60px;     width: inherit;     box-shadow: 0 5px black inset; }  #a1 {     position: absolute;     height: 64px;     width: 172px;     margin-left: 60px;     margin-top: 3px; }  #a2 {     color: white;     font-size: 28px;     font-weight: bold;     margin-top: 15px;     margin-left: 240px;     position: absolute; }   #a3,#a4,#a5,#a6,#a7,#a8 {     position: absolute;     color: white;     margin-top: 15px;     font-size: 18px;     float: none; } #a3 {  color: #FFCC00;  margin-left: 55%;  } #a4 {  margin-left: 61%;  } #a5 {  margin-left: 65%;  } #a6 {  margin-left: 71%;  } #a7 {  margin-left: 79%;  } #a8 {  margin-left: 85%;  }   #a_1,#a_2,#a_3,#a_4,#a_5,#a_6 {     position: absolute;     color: white;     margin-top: 15px; } #a_1 {  margin-left: 60%;  } #a_2 {  margin-left: 64%;  } #a_3 {  margin-left: 70%;  } #a_4 {  margin-left: 78%;  }

`
麻烦大家帮我看看怎么实现？谢谢

友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
1条回答
薄暮夏凉 - 这个人很懒，什么都没留下
1楼-- · 2016-10-18 17:31

固定宽度~~

一周热门 更多>