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標(biāo)籤

齊 齊 <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;

轉(zhuǎn)載于:https://www.cnblogs.com/xieyier/p/4433100.html

總結(jié)

以上是生活随笔為你收集整理的兩端對齊的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。