例1.需要分块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.z{
width: 970px;
margin: 0 auto;
}
.z .top{
height: 103px;
margin-bottom: 10px;
}
.z .top .red{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.r{
float: right;
width: 679px;
margin: bottom 10px;
}
.r .g1{
height: 49px;
width: 137px;
float: right;
margin-bottom: 8px;
background-color: green;
}
.r .g2{
width: 100%;
height: 46px;
background-color: green;
float: right;
}
.mid{
height: 435px;width: 970px;
margin-bottom: 10px;
}
.mid .le{
width: 310px;
height: 435px;
background-color: yellow;
float: left;
}
.mid .ri{
width: 650px;
height: 435px;
float: right;
}
.mid .ri .shang{
width: 650px;
height: 400px;
float: right;
margin-bottom: 10px;
}
.mid .ri .shang .sy{
width: 190px;
height: 401px;
float:right;
background-color: pink;
}
.mid .ri .shang .sz{
width: 450px;
height: 401px;
float: left;
}
.shang .sz .t1{
width: 100%;
height: 240px;
background-color:blue;
margin-bottom: 10px;
}
.t2{
width: 100%;
height: 110px;
background-color:blue;
margin-bottom: 10px;
}
.t3{
width: 100%;
height: 30px;
background-color:blue;
margin-bottom: 10px;
}
.mid .ri .xia{
width: 100%;
height: 25px;
float: right;
background-color: green;
}
#bottom{
width: 970px;
height: 35px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="z">
<!-- 顶部 -->
<div class="top">
<div class="red"></div>
<div class="r">
<div class="g1"></div>
<div class="g2"></div>
</div>
</div>
<!-- 中间 -->
<div class="mid">
<div class="le"></div>
<div class="ri">
<div class="shang">
<div class="sz">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
</div>
<div class="sy"></div>
</div>
<div class="xia"></div>
</div>
</div>
<!-- 下部 -->
<div id="bottom"></div>
</div>
</body>
</html>
例二
不需要分块,根据浮动的依次贴边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer {
height: 440px;
width: 940px;
padding: 10px;
border: 2px solid #000;
margin: 10px auto
}
.outer div {
float: left;
}
.outer .box1{
width: 300px;
height: 260px;
background: pink;
}
.outer .box2 {
width: 240px;
height: 260px;
background:cyan;
}
.outer .s_box{
width: 200px;
height: 130px;
}
.outer .box3 {
background: yellowgreen;
}
.outer .box4 {
background: greenyellow;
}
.outer .box7{
width: 300px;
height: 180px;
background: blueviolet;
}
.outer .s_box2 {
width: 160px;
height: 180px;
}
.outer .box5 {
background: purple;
}
.outer .box6 {
background: palegreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="s_box box3"></div>
<div class="s_box box4"></div>
<div class="s_box box4"></div>
<div class="s_box box3"></div>
<div class="box7"></div>
<div class="s_box2 box5"></div>
<div class="s_box2 box6"></div>
<div class="s_box2 box5"></div>
<div class="s_box2 box6"></div>
</div>
</body>
</html>