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>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2796