浮动流代码
2019-07-15 本文已影响0人
nickNic
首先看效果
CA85D762-5447-40AF-BF26-EA0F5AF2DC61.png
OK 代码贴出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{
margin:0;padding:0
}
div{
margin: 0 auto;
}
.d1{
background-color: white;
width: 980px;
height: 100px;
margin-bottom: 10px;
}
.d1l{
width: 250px;
height: 100px;
background-color: darkred;
float: left;
}
.d1r{
width: 150px;
height: 50px;
background-color: cornflowerblue;
float: right;
}
.d1b{
width: 630px;
height: 50px;
background-color: purple;
float: right;
}
.d2{
background-color: white;
width: 980px;
height: 400px;
margin-bottom: 10px;
}
.d2l{
background-color: yellow;
width: 320px;
height: 400px;
float: left;
}
.d2r{
background-color: white;
width: 650px;
height: 400px;
float: right;
}
.d2rt{
background-color: orangered;
width: 400px;
height: 200px;
float: left;
margin-bottom: 10px;
}
.d2rr{
background-color: greenyellow;
width: 240px;
height: 350px;
float: right;
}
.d2rc{
background-color: red;
width: 400px;
height: 140px;
float: left;
margin-bottom: 10px;
}
.d2rb{
background-color: dimgray;
width: 650px;
height: 40px;
float: left;
}
.d3{
background-color: blue;
width: 980px;
height: 40px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d1l">
</div>
<div class="d1r">
</div>
<div class="d1b">
</div>
</div>
<div class="d2">
<div class="d2l"></div>
<div class="d2r">
<div class="d2rt">
</div>
<div class="d2rr">
</div>
<div class="d2rc">
</div>
<div class="d2rb">
</div>
</div>
</div>
<div class="d3">
</div>
</body>
</html>
