Biegral Blog

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