兩端對齊的三種方式

兩端對齊的三種方式

flex實現

        .body {
             /*flex 使用*/
            display: flex;
            justify-content: space-between;
        }

內聯元素方式實現

        .body4{
            /* 內聯元素*/
            text-align: justify;
        }
        .body4:after{
            /* 內聯元素*/
            /* text-align-last:justify只有IE支持，標準瀏覽器需要使用 .demo:after 僞類模擬類似效果 */
            display:inline-block;
            overflow:hidden;
            width:100%;
            height:0;
            content:'';
            vertical-align:top;/* opera瀏覽器解決底部多餘的空白 */
        }
        .area4 {
            width: 100px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            /* 內聯元素*/
            display: inline-block;
        }

        <div class="body4">
            <div class="left area4">left4</div>
            <div class="right area4">right4</div>
        </div>

column 方式

        .body1{
            /* column 方式 */
            column-count: 2;
            column-gap: 79%;
        }

文字的兩端對齊

        <div class="text-justify">
            <div class="text">我想要兩端對齊</div>
        </div>
        .text{
            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+*/
        }