实现两个div并列的多种方法

方法一:float #div1{width:50%;height:300px;background:blue;float:left;}#div2{width:50%;height:300px;background:green;float:left;} 方法二:display:table-cell #parent{width:10...

方法一:float

#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;
}

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
廖雪
廖雪

78 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. bngvkjlajj 0 文章