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并列显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！