css实现等宽3列布局

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

总html布局很easy:

<div class="parent">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>

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

当然也可以使用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%;
}

 

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