兩端對齊

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;