<style type="text/css">*{ border:0px; margin:0px; padding:0px;}.head{width:100%; height:200px; background:azure; }.main{ width:600px; margin:0 auto; height:500px; background:pink; }.left{ float:left; height:500px; background:red; width:200px; }.right{ float:left; height:500px; background:gray; width:400px; }.rl{ float:left; width:100px; height:500px; background:pink; }.rr{ float:right; width:300px; height:500px; background:aqua; }.foot{ width:100%; height:200px; background:purple; }</style></head><body><div class="head"></div><div class="main"> <div class="left"></div> <div class="right"> <div class=“rl”></div> <div class="rr"></div> </div></div><div class="foot"></div></body></html>为什么中间层没有显示粉色？
2 回答
superheroes丶
TA贡献9条经验 获得超5个赞
亲，你.main给了个600px的宽度，然而你左右分别是200px和400px这样已经铺满了。这样是看不到原来的粉色的。你可以这样写，不知道是不是你要的效果~
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
*{
border:0px;
margin:0px;
padding:0px;
}
.head{width:100%;
height:200px;
background:azure;
}
.main{
width:100%;
margin:0 auto;
height:500px;
background:pink;
}
.left{
float:left;
height:500px;
background:red;
width:200px;
}
.right{
float:right;
height:500px;
background:gray;
width:400px;
}
.rl{
float:left;
width:100px;
height:500px;
background:pink;
}
.rr{
float:right;
width:300px;
height:500px;
background:aqua;
}
.foot{
width:100%;
height:200px;
background:purple;
}
</style>
</head>
<body>
<div class="head">
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class=“rl”></div>
<div class="rr"></div>
</div>
</div>
<div class="foot">
</div>
</body>
</html>
- 2 回答
- 1 关注
- 1661 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消