CSS是一种样式语言，其中,两个div并列的实现是很常见的需求，本文就来介绍一下css实现两个div并列显示的多种方法，具有一定的参考价值，感兴趣的可以了解一下
方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。
#div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; }方法二：display:table-cell
#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
#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; }方法四：绝对定位
*{ 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布局
#parent{ display:flex; } #div1{ width:50%; height:300px; background:blue; flex:1; } #div2{ width:50%; height:300px; background:green; flex:1; }到此这篇关于css实现两个div并列显示的多种方法的文章就介绍到这了,更多相关css两个div并列显示内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！
以上就是css实现两个div并列显示的多种方法的详细内容，更多请关注0133技术站其它相关文章！
