兩端對齊

1.利用flex

parentElement{display: flex;justify-content: space-between;}

左边对齐

右边对齐

    <div class="justifySpan">
        <span>齐</span>
        <span>齐</span>
    </div>

.justify {
        display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
    }

 

2. text-align:justify;

parentElement { text-align:justify;}
parentElement :after{content:""; display: inline-block;width:100%;} 主要還是要width:100% . display:inline-block
childElement {display: inline-block;} 或者span e a 這種inline 、inline-block標籤

齐 齐

    <div class="justifySpan">
        <span>齐</span>
        <span>齐</span>
    </div>

    .justifySpan {
    text-align:justify;
    text-justify:distribute-all-lines;/*ie6-8*/
    text-align-last:justify;/* ie9*/
    -moz-text-align-last:justify;/*ff*/
    -webkit-text-align-last:justify;/*chrome 20+*/
    }
    .justifySpan:after{
      content:"";
      display: inline-block;
      width:100%;
      overflow:hidden;
      height:0;
    }

 2.2 

左边对齐

右边对齐

    <div class="justifySpan">
        <div>左边对齐</div>
        <div>右边对齐</div>
    </div>

.justifySpan {
    text-align:justify;
    text-justify:distribute-all-lines;/*ie6-8*/
    text-align-last:justify;/* ie9*/
    -moz-text-align-last:justify;/*ff*/
    -webkit-text-align-last:justify;/*chrome 20+*/
    }
    .justifySpan:after{
      content:"";
      display: inline-block;
      width:100%;
      overflow:hidden;
      height:0;
    }
    .justifySpan div{
        display: inline-block;
    }

3.float:right;float:left;