“像編輯word一樣實現兩端對齊”

左對齊和右對齊都是很常見的對齊方式，但是很多時候兩端對齊也是必須解決的。文字對齊的text-align:justify，大家都不陌生，它只相容ie瀏覽器，然而兩端對齊對於很多響應式網頁和移動端的自適應有很大的用處，比如幾個按鈕，不管你螢幕尺寸怎麼變化都要他們之間的間隙保持不變，css3對這一塊也有解決方案，雖然相容性不是很好。不失為一種好的漸進增強方案。

1， text-align: justify+inline-block以及模擬text-align

這裡寫出通用簡單列子結構，下文不在累贅~ 
 <ul>
    <li><img
 
 src="./header.png" alt=""></li>
    <li><img src="./header.png" alt=""></li>
    <li><img src="./header.png" alt=""></li>
    <li><img src="./header.png" alt=""></li>
</ul>
第一種實現樣式：

        * {
        padding: 0;
        margin: 0;
    }
    
    ul li img {
        width: 100px;
        height: 100px;
    }
    /* 
attention：
1.IE中要實現塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align為justify
2.line-height:0 解決標準瀏覽器容器底部多餘的空白
3.font-size:0清楚firefox下多餘的空白
*/
    
    ul {
        width: 600px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #abcdef;
        overflow: hidden;
        text-align: justify;
        text-align-last: justify;
        line-height: 0;
        font-size: 0;
    }
    
    ul li {
        list-style: none;
        display: inline-block;
    }
    /* 
    模擬text-align：
    1.text-align-last:justify 目前只有IE支援，標準瀏覽器需要使用 .demo:after 偽類模擬類似效果 
    2.opera瀏覽器需要新增 vertical-align:top 才能完全解決底部多餘的空白
     */
    
    ul::after {
        content: "";
        display: inline-block;
        height: 0;
        font-size: 0;
        width: 100%;
        vertical-align: top;
    }
 

要說的，要注意的，都在程式碼裡面註釋了，實在沒有必要過多的解釋什麼。

2，css3 flex+justify-content: space-between;或者flexbox+box-pack:justify

版本迭代問題,box-pack是css3的新屬性，依賴於display:box(舊版彈性佈局)，受box-orient影響，box-pack決定了子標籤水平對齊的方式，可選值有start | end | center | justify。使用box-pack:justify來實現兩端對齊非常簡單，程式碼量也少。如果是display:flex(新版彈性佈局)則用justify-content為水平對齊方式~

把它們2中方式都寫出來

核心程式碼應該是這樣

     ul {
        width: 600px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid red;
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

3，css3 column(多列布局)

這個也是很簡單的，只需用column-count定義物件的列數,我這個demo有4個img，那麼定義為4列 column-gap定義了物件中列與列的間距，這個只能寫死或者根據排版計算間距，間距不能設定為百分比，顯得不夠靈活

新增以下字首就好：

   ul{
   -webkit-column-count:4;
   -moz-column-count:4;
   column-count:4;
   -webkit-column-gap:20px;
   -moz-column-gap:20px;
   column-gap:20px; 
 }

參考網站 http://www.cnblogs.com/PeunZhang/p/3289493.html