利用 text-align:justify 实现两端对齐布局

text-align：justify
本意是让 “整行” 的文字实现左右对齐，不留空白。
text-align用来控制inline及inline-block元素的左右对齐方式。
在布局时只需要将列表项元素diplay转换为inline-block，然后外层包裹元素设置text-align：justify
就能实现如下这种列表项元素的自动左右对齐的布局效果

实现的效果：

CSS部分：

            .con{                width: 500px;                height: 500px;                border: 1px solid #000;                text-align: justify;                text-justify:inter-ideograph; /*兼容ie8及以下，需要添加次属性才能实现文字对齐*/            }            .sub{                width: 110px;                height: 110px;                border: 1px solid #000;                display: inline-block;                *display: inline;       /*兼容ie7及以下对 display: inline-block 的支持*/                *zoom: 1;               /*兼容ie7及以下对 display: inline-block 的支持*/            }            span{                display: inline-block;                width: 110px;                height: 0;                overflow: hidden;            }

HTML部分：

    <div class="con">            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <div class="sub"></div>            <span></span>            <span></span>            <span></span>        </div>

注解：最后的三个 等宽、0高度的span元素存在的意义是凑齐一整行inline-block元素，因为text-align：justify只对整行起作用。