SOURCE

<div class="top">
	<div class="l">投影仪</div>
	<ul>
		<li><a href="#d05">D05</a></li>
		<li><a href="#d06">D06</a></li>
	</ul>
	<div class="r"><a href="#">more</a></div>
</div>
<div class="box clearfix">
	<div class="main" id="d05">
		<div class="main1">5</div>
		<div class="main2">5</div>
		<div class="main2">5</div>
		<div class="main2">5</div>
		<div class="main2">5</div>
		<div class="main2">5</div>
		<div class="main2">5</div>
	</div>
	<div class="main" id="d06">
		<div class="main1">6</div>
		<div class="main2">6</div>
		<div class="main2">6</div>
		<div class="main2">6</div>
		<div class="main2">6</div>
		<div class="main2">6</div>
		<div class="main2">6</div>
		<div class="main2">6</div>
	</div>
</div>

ul{margin:0;padding:0}
li{list-style:none;}
.top,.box,.main{margin:0 auto;}
.top{width:290px;height:50px; background:#fff;}
.l{margin-right:20px;}
.l,ul li{line-height:50px;float:left;}
ul li{margin:0 5px;}
.r{line-height:50px;float:right;}

.box,.main{width:290px;height:210px;background:#fff;}
.box{overflow:hidden;}
.main1{width:50px;height:200px;background:#444;
				 float:left;
}
.main2{width:50px;height:95px;background:#777;
				 float:left;margin:0 0 10px 10px;
}
.clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}