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个数太多，就会换行，就导致换行的那几个个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，第二行有三个，所以只需要补一个