两个div并列一行显示的方法
两个div并排显示，除了常用的 float 和 table-cell外，还有其他几种方法，分别介绍下使用负margin、绝对定位和flex布局来实现div并排显示。
# 使用负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;
}
```
我的笔记