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

#div1{
  width:50%;
  height:300px;
  background:blue;
  float:left;
}
#div2{
  width:50%;
  height:300px;
  background:green;
  float:left;
}

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

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

#parent{
  display:flex;
}
#div1{
  width:50%;
  height:300px;
  background:blue;
  flex:1;
}
#div2{
  width:50%;
  height:300px;
  background:green;
  flex:1;
}