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: 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小時前
固定寬度~~
