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，也可附件下载。本人菜鸟，轻拍！！！

版权声明：本文为博主原创文章，未经博主允许不得转载。