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

我们在网页制作中，经常遇到这样的布局

，两端对齐布局；此时，为了方便处理，我们可以利用text-aligin:justify;实现这样的布局。

简单代码如下： <ul class="teacher-list">
<li class="list-justify"></li>
<li class="list-justify"></li>
<li class="list-justify"></li>
</ul>

<style>
 .teacher-list {

          font-size: 0;

          text-align: justify;

          &:after {

            content: '';

            width: 100%;

            height: 0;

            display: inline-block;

            visibility: hidden;

          }

  }

 .list-justify{

          position: relative;

          margin-bottom: 0.1rem;

          padding-bottom: 0.2rem;

          box-sizing: border-box;

          display: inline-block;

          width: 2.1rem;

          min-height: 3rem;

          border: 1px solid #f28f93;

          border-radius: 0.1rem;

          vertical-align: top;

}

</style>