css - html在不同尺寸浏览器窗口中页面排版混乱
本文介绍了css - 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%; }
`
麻烦大家帮我看看怎么实现？谢谢
解决方案
既然引用了bootstrap就可以给div和img加个类啊，class="col-sm-1"，这样就是响应式布局，缩小还能保持良好的结构
这篇关于css - html在不同尺寸浏览器窗口中页面排版混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
