<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.left,.right,.main{height: 400px;}
.left{width: 30%;background: red;position: absolute;top:0;left: 0;}
.main{margin:0 20%;background: pink;}
.right{width: 30%;background: blue;position:absolute;top:0;right: 0;}
</style>
</head>
<body>
<div>hhhhh</div>
<div>hhhhh</div>
<div>hhhhh</div>
</body>
</html>为啥还出现了覆盖？？？？？？
1 回答
stone310
TA贡献361条经验 获得超191个赞
按照你的思路，修改了见注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;} /*初始化*/
body{width:100%} /*设置父元素宽度，margin百分比才有效果*/
.left,.right,.main{height: 400px;}
.left{width: 30%;background: red;position: absolute;top:0;left: 0;}
.main{margin:0 30%;background: pink;} /*左右相隔30%，刚刚好*/
.right{width: 30%;background: blue;position:absolute;top:0;right: 0;}
</style>
</head>
<body>
<div class="left">hhhhh</div>
<div class="main">hhhhh</div>
<div class="right">hhhhh</div>
</body>
</html>- 1 回答
- 0 关注
- 1056 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消