大图用float,小图用margin——Css里用nth-child()控制不同小图的位置。
HTML部分
0
1
2
3
4
5
css部分.rect-group {
width: 320px;
height: 160x;
background: #efefef;
}
.rect {
background: #ccc;
}
.big {
float: left;
width: 210px;
height: 110px;
}
.small {
width: 100px;
height: 50px;
}
.small:first-child {
margin: 0 0 0 220px;
}
.small:nth-child(2) {
margin: 10px 0 0 220px;
}
.small:nth-child(3) {
margin: 10px 0 0 220px;
}
.small:nth-child(4) {
margin: -50px 0 0 110px;
}
.small:last-child {
margin: -50px 0 0 0;
}