位置: 首页 > CSS/CSS3 > 两个div并列一行显示的多种方法

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

  • 阅读: 502
  • 发布时间: 2023-08-13 00:21:25
  • 评论: 9999+

方法一: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;
}



发布评论 留下您的评论 给个鼓励吧

搜索

用户推荐

sq1995liu
TA很懒,还没有添加简介
hxm8888
TA很懒,还没有添加简介
haru88
TA很懒,还没有添加简介
287801813
TA很懒,还没有添加简介
ffshen
TA很懒,还没有添加简介
renhuanxi
TA很懒,还没有添加简介
erpao123
TA很懒,还没有添加简介
aa99605
TA很懒,还没有添加简介
summber
TA很懒,还没有添加简介
A7777
TA很懒,还没有添加简介