css实现等宽3列布局

今天早上参加一公司面试,结果面试官让我当场敲代码,其中一道就是实现3列等宽自适应布局,紧张加上技术不够,当时我乱七八糟胡乱敲了一顿,下午试了试,我哭晕在厕所,为啥一到关键时刻就掉链子(捂脸),实现了顺便记录一下,方便以后看

总html布局很easy:

1.flex实现:

.parent{
	display:flex;
	width:100%;
	height:300px;
}
.left{
	width:30%;
	margin:0 2.5% 0 0;
	height:100%;
	background-color:blue;
}
.center{
	width:30%;
	margin:0 5% 0 2.5%;
	height:100%;
	background-color:red;
}

.right{
	flex:1;
	background-color:yellow;
}

css实现等宽3列布局_第1张图片

当然也可以使用justify-content:space-between,左右两侧没有间距,中间间距相同

.parent{
	display:flex;
	height:300px;
	justify-content:space-between;
	
}
.left{
	background-color:pink;
	width:30%;
}
.center{
	background-color:black;
	width:30%;
}
.right{
	background-color:red;
	width:30%;
}

css实现等宽3列布局_第2张图片

 

2.绝对布局:

.parent{
	width:100%;
	height:200px;
	position:relative;
}
.left{
	width:30%;
	position:absolute;
	left:0;
	top:0;
	background-color:red;
	height:100%;
}
.center{
	width:30%;
	margin-left:35%;
	background-color:blue;
	height:100%;
	position:absolute;
}
.right{
	width:30%;
	margin-left:70%;
	background-color:yellow;
	height:100%;
}

3.根据浮动

.parent{
	width:100%;
	height:200px;
}
.left{
	float:left;
	width:30%;
	margin:0 2.5% 0 0;
	background-color:blue;
	height:100%;
}
.center{
	float:left;
	width:30%;
	margin-left:2.5%;
	margin-right:5%;
	background-color:red;
	height:100%;
}
.right{
	overflow:hidden;
	background-color:pink;
	height:100%;
}

4.打算用table-cell来做,但是table-cell设定margin无效,所以是等宽但是无间隔,我也不知道这个该怎么处理,有知道的大哥教教我

.left{
	height:100%;
	background-color:pink;
	display:table-cell;
}
.center{
	height:100%;
	background-color:black;
	display:table-cell;
}
.right{
	height:100%;
	background-color:red;
	display:table-cell;
}

css实现等宽3列布局_第3张图片

你可能感兴趣的:(css实现等宽3列布局)