两个div并列一行显示的多种方法

两个div并列一行显示的多种方法

以下提供了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;

}

相关推荐

数组转字符串的方法(3种)
365bet亚洲版官网

数组转字符串的方法(3种)

📅 07-04 👁️ 4910
《CF手游》AK47天使怎么样 AK47天使武器伤害性能测评
365体育怎么打不开网址

《CF手游》AK47天使怎么样 AK47天使武器伤害性能测评

📅 07-10 👁️ 5706
《迷你世界》西瓜南瓜种植方法 西瓜南瓜生长过程一览
365体育怎么打不开网址

《迷你世界》西瓜南瓜种植方法 西瓜南瓜生长过程一览

📅 07-05 👁️ 8830