分享css实现两个div并列显示的5种方法

1

2

3

4

5

6

7

8

9

10

11

12

#div1{

    width:50%;

    height:300px;

    background:blue;

    float:left;

}

#div2{

    width:50%;

    height:300px;

    background:green;

    float:left;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

#parent{

    width:100%;

    display:table;

}

#div1{

    width:50%;

    height:300px;

    background:blue;

    display:table-cell;

}

#div2{

    width:50%;

    height:300px;

    background:green;

    display:table-cell;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

#parent{

    display:flex;

    overflow:hidden;

}

#div1{

    width:50%;

    height:300px;

    background:blue;

    padding-bottom:2000px; 

    margin-bottom:-2000px; 

}

#div2{

    width:50%;

    height:300px;

    background:green;

    padding-bottom:2000px; 

    margin-bottom:-2000px; 

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

*{

    margin:0;

    padding:0;

}

#div1{

    width:50%;

    height:300px;

    background:blue;

    position:absolute;

    left:0;

    top:0;

}

#div2{

    width:50%;

    height:300px;

    background:green;

    position:absolute;

    transform:translate(100%, 0);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#parent{

    display:flex;

}

#div1{

    width:50%;

    height:300px;

    background:blue;

    flex:1;

}

#div2{

    width:50%;

    height:300px;

    background:green;

    flex:1;

}