![](https://i-blog.csdnimg.cn/blog_migrate/9c8c3ab5601d7ba711a0322f232394e4.jpeg)
CSS是一种样式语言,其中,两个div并列的实现是很常见的需求,本文就来介绍一下css实现两个div并列显示的多种方法,具有一定的参考价值,感兴趣的可以了解一下
方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以实现两个div并列一行。
1 2 3 4 5 6 7 8 9 10 11 12 | #div 1 { width : 50% ; height : 300px ; background : blue ; float : left ; } #div 2 { 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; } #div 1 { width : 50% ; height : 300px ; background : blue ; display : table-cell ; } #div 2 { 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 ; } #div 1 { width : 50% ; height : 300px ; background : blue ; padding-bottom : 2000px ; margin-bottom : -2000px ; } #div 2 { 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 ; } #div 1 { width : 50% ; height : 300px ; background : blue ; position : absolute ; left : 0 ; top : 0 ; } #div 2 { 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; } #div 1 { width : 50% ; height : 300px ; background : blue ; flex: 1 ; } #div 2 { width : 50% ; height : 300px ; background : green ; flex: 1 ; } |
到此这篇关于css实现两个div并列显示的多种方法的文章就介绍到这了,希望可以帮到你
转自:微点阅读 https://www.weidianyuedu.com