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

CSS是一种样式语言，其中,两个div并列的实现是很常见的需求，本文就来介绍一下css实现两个div并列显示的多种方法，具有一定的参考价值，感兴趣的可以了解一下

 方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。

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

方法二：display:table-cell

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

方法三：负margin

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); }

方法五：flex布局

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

到此这篇关于css实现两个div并列显示的多种方法的文章就介绍到这了,希望可以帮到你。

转自：微点阅读   https://www.weidianyuedu.com