这个有关自适应的百分比如何去计算？？？
<!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>为啥还出现了覆盖？？？？？？
Blizzard_lihe浏览 1057回答 1
1回答
-
stone310
按照你的思路，修改了见注释<!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>
随时随地看视频慕课网APP
Html/CSS