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
精彩内容
发表评论