css - html在不同尺寸浏览器窗口中页面排版混乱-PHP中文网问答

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

截图如下，出现堆叠：

希望达到的效果如下：

代码：
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>
<p class="row">
    <p class="col" id="a3">首页</p>
    <img class="col" id="a_1" src="images/数据管理平台/u38.png">
    <p class="col" id="a4">问题</p>
    <img class="col" id="a_2" src="images/数据管理平台/u38.png">
    <p class="col" id="a5">专栏</p>
    <img class="col" id="a_3" src="images/数据管理平台/u38.png">
    <p class="col" id="a6">用户</p>
    <img class="col" id="a_4" src="images/数据管理平台/u38.png">
    <p class="col" id="a7">特色</p>
    <img class="col" id="a_5" src="images/数据管理平台/u38.png">
    <p class="col" id="a8">在线客服</p>
</p>
<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%;  }

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