CSS实现混合布局
<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>
为什么中间层没有显示粉色？
Geminihope2回答
-
慕粉1041029323
照着源代码打了一遍，嵌套的right显示不出来，为啥 -
superheroes丶
亲，你.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>
随时随地看视频慕课网APP
Html/CSS