简单的任意列数均匀布局

　　今天无意间发现了一种之前未见过的css中多列对齐的方式。想想原来要对齐总是设置各种float，然后宽度，有时还会因为因为设置的宽度不够精确导致div块移动到下一列。现在看到的方式可以针对任意多列布局，省去了计算的麻烦。

　　核心的是text-align:justify以及伪元素的配合使用。

　　实现效果：

　　

　　text-align:justify 的意思是两端对齐。并且很特殊的是text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行），因此如果有多行怎么办呢？

　　我们利用伪元素来充当最后一行。

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <!--[if lte IE 7]>
        <b></b><![endif]--><!-- 兼容不支持伪元素的 ie678 -->
    </div>
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
    </div>
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
    </div>
    <div class="justify">
        <i>1</i>
        <i>2</i>
    </div>
    <div class="justify">
        <i>1</i>
    </div>
</div>

　　样式表：

        .container{
            width:400px;
            margin:50px auto 0;
        }
        .justify {
            position: relative;
            width: 100%;
            height: 24px;
            text-align: justify;   /*外层设置对齐方式*/
            margin-bottom: 20px;
        }
        .justify i{
            width:24px;
            line-height:24px;
            display:inline-block;
            text-align:center;
            background:#333;
            color:white;
            border-radius:50%;
            overflow: hidden;
            font-style: normal;
        }
        .justify:after{
            content:"";  /*添加伪元素*/
        }
        .justify:after,
        .justify b{
            display: inline-block;  /*设置display*/
            position:relative;
            top:-28px;
            height:1px;
            line-height: 0;
            width:100%;　　　/*伪元素宽度撑满*/
            background:#333;
            z-index:-1;
            *zoom:1;
        }

　　也就是核心的就下面的代码，简单爽快。

        .justify{
            width: 500px;
            height: 300px;
            text-align: justify;
        }
        .justify:after{
            content:'';
            display: inline-block;
            width:100%;
        }
        .justify i{
            display:inline-block;
            text-align:center;
        }