css实现等宽3列布局 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; }

文章图片

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

【css实现等宽3列布局】