利用伪元素实现任意列数的均匀布局

实现如下图的任意列数的均匀布局效果，之前做这种效果都是用last-child去掉右边距来实现，这种方法ie8不支持，在http://www.cnblogs.com/coco1s/博客中看到一种利用“text-justify和伪元素”就能实现的方法。

亲测后，果然简单有效；

 

上代码：

html布局代码：

<div class="container">
    <div class="justify">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <div class="justify">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="justify">
        <div>1</div>
        <div>2</div>
    </div>
</div>

 

css代码： 

 .container{width:800px; height:auto; overflow: hidden;border:1px solid #000;}
 .justify{text-align: justify;}
 .justify div{
            width:100px;
            line-height:100px;
            display:inline-block;
            text-align:center;
            background:#000;
            color:#Fff;
        }
.justify:after {
            content: "";
            display: inline-block;
            position: relative;
            width: 100%;
        }