以下提供了5种实现两个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;

}