html在不同尺寸浏览器窗口中页面排版混乱？
浏览器放至最大显示没有问题，但是改变浏览器窗口大小，出现混乱
截图如下，出现堆叠：
希望达到的效果如下：
代码：
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: 优艾设计网_PS论坛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%;}
`
麻烦大家帮我看看怎么实现？谢谢
君墨言 优艾设计网_Photoshop论坛 22小时前
固定宽度~~
加载中,请稍侯......
精彩评论