需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img{float:left}。
3、浏览器运行index.html页面，此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。
可以这样做：<div
id="wraper">
<div
class="image1">image1</div>...</div>
#image_holder
{
position:relative其他代码｝
.image1
{
position:absolute
left:**px
top:**px}
原理就是用一个大盒子将六张图片包围起来，然后大盒子用相对定位，然后让六个小盒子绝对定位，具体小盒子要放到什么地方，自己计算一下就可以了。
一、float实现
html结构：
[html] view plain copy
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css：
[css] view plain copy
.left,.right{
width: 200px
height: 300px
background-color: red
}
.left{
float: left
}
.right{
float: right
}
.center{
margin: 0 210px
height: 300px
background-color: blue
}
这种实现受外界影响小，但是对html结构有要求（center必须放在最后，left与right则无所谓），当界面缩小到一定程度时，right会被挤到下一行
二、position实现
html结构：
[html] view plain copy
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css：
[css] view plain copy
.left,.right{
position: absolute
width: 200px
height: 300px
background-color: yellow
}
.left{
left: 0
}
.right{
right: 0
}
.center{
margin: 0 210px
height: 300px
background-color: blue
}
该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生重叠。
