老规矩，先上图（请忽略图中文字^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，也可附件下载。本人菜鸟，轻拍！！！
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/u010037043/article/details/46873131
