<!DOCTYPE?html>
<style>
	*{margin:?0;?padding:?0}
	.box{?width:?330px;?overflow:?hidden}
	.img{
		float:?right;
		width:?100px;
		height:?50px;
		margin:?0?10px?10px?0;
		background-color:?#eee;
	}
	.img:first-child{
		float:?left;
		width:?210px;	
		height:?110px
	}
</style>
<div?class="box">
	<div?class="img">0</div>
	<div?class="img">1</div>
	<div?class="img">2</div>
	<div?class="img">3</div>
	<div?class="img">4</div>
	<div?class="img">5</div>
</div>

我用div給你做個演示，你改為圖片即可。

大圖用float，小圖用margin——Css里用nth-child()控制不同小圖的位置。

HTML部分

<div?class="rect-group">
??<div?class="rect?big">0</div>
??<div?class="small-group">
????<div?class="rect?small">1</div>
????<div?class="rect?small">2</div>
????<div?class="rect?small">3</div>
????<div?class="rect?small">4</div>
????<div?class="rect?small">5</div>
??</div>
</div>

?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;
}