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

最新推荐文章于 2024-10-08 17:49:24 发布

筱葭

最新推荐文章于 2024-10-08 17:49:24 发布

阅读量2.3w

点赞数 11

分类专栏： CSS 文章标签： div并列

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/62418702

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

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