css:

.box {

width: 256px;

height: 256px;

border-bottom: 1px dashed #ccc;

text-align: justify;

font-size: 0;

/*text-align:justify 要想有两端对齐的效果，需

要满足两点：一是有分隔点，如空格；二是要超过一行*/

}

/*如何要兼容 ie7就不要用伪元素，用dom元素代替*/

/* .box:before {

content: "";

display: inline-block;

height: 100%;

}*/

.box:after {

content: "";

display: inline-block;

width: 100%;

/*这个为满足text-align:justify要超过一行的要求*/

}

.bar {

display: inline-block;

width: 20px; height: 100px;

background: red;

}

html:

<!--第一个i标签前面千万不要有空格或者回车，空格和回车就是占用空白的位置，如果采用before底部对齐时会出现空白-->

<div id="box" class="box"><i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

</div>

但是当里面的i个数太多，就会换行，就导致换行的那几个个i就会在新的一行左右对齐分布，解决的方法是在最后一个i后面补上几个i，这个个数加上换行的i的个数要等于第一行i的个数，见代码

css

.bar {

display: inline-block;

width: 20%;

height: 100px;

background: red;

margin-right: 10px;

}

.place{

display: inline-block;

width: 20%;

vertical-align: bottom;

margin-right: 10px;

}html ，第一行有4个i，第二行有三个，所以只需要补一个

<div id="box" class="box">

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<span class="place"></span>

</div>