float：center？？？

老规矩，先上图（请忽略图中文字^V^）：


乍一看感觉是对中间的图片使用了float:center;但是仔细一想float属性是没有center这个值的。那是怎么实现的呢？我一步一步拆给大家看。

1.构建主体结构



container中放置两个子元素，分别float:left和float:right;

2.使用伪元素:before为中间的img占位



如果page-left和page-right之间没有间隔，那两个伪元素的宽就是中间img的一半，和img一样高。

.page_left:before, .page_right:before {
width: 151px;
height: 278px;
content: "";
}
.page_left:before{
float: right;
}
.page_right:before{
float: left;
}

3.请img归位

伪元素已经为img占好位置，现在只需让img归位即可。

.img {
width: 302px;
height: 278px;
position: absolute;
top:0;
left: 349px;
background-image: url("img/sec1_qq.png");
}

demo请戳这里：http://runjs.cn/detail/nqhgwmbm，也可附件下载。本人菜鸟，轻拍！！！