两端对齐的三种方式_div 元素两端对齐

两端对齐的三种方式

flex实现

        .body {
             /*flex 使用*/
            display: flex;
            justify-content: space-between;
        }
1
2
3
4
5

内联元素方式实现

        .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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

        <div class="body4">
            <div class="left area4">left4</div>
            <div class="right area4">right4</div>
        </div>
1
2
3
4

column 方式

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

文字的两端对齐

        <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+*/
        }
1
2
3
4
5
6
7
8
9
10