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

本人菜鸟，轻拍！！！

巴特西

float：center？？？

最新文章

热门文章