猿问

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>

为什么中间层没有显示粉色?


Geminihope
浏览 1662回答 2
2回答

慕粉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
我要回答