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，也可附件下载。

本人菜鸟，轻拍！！！