三栏布局的实现方式,尽可能多写,浮动布局时,三个div的生成顺序有没有影响
参考回答:
两列定宽一列自适应:
1、使用float+margin:
给div设置float:left,left的div添加属性margin-right:left和center的间隔px,right的div添加属性margin-left:left和center的宽度之和加上间隔
2、使用float+overflow:
给div设置float:left,再给right的div设置overflow:hidden。这样子两个盒子浮动,另一个盒子触发bfc达到自适应
3、使用position:
父级div设置position:relative,三个子级div设置position:absolute,这个要计算好盒子的宽度和间隔去设置位置,兼容性比较好,
4、使用table实现:
父级div设置display:table,设置border-spacing:10px//设置间距,取值随意,子级div设置display:table-cell,这种方法兼容性好,适用于高度宽度未知的情况,但是margin失效,设计间隔比较麻烦,
5、flex实现:
parent的div设置display:flex;left和center的div设置margin-right;然后right 的div设置flex:1;这样子right自适应,但是flex的兼容性不好
6、grid实现:
parent的div设置display:grid,设置grid-template-columns属性,固定第一列第二列宽度,第三列auto,
对于两侧定宽中间自适应的布局,对于这种布局需要把center放在前面,可以采用双飞翼布局:圣杯布局,来实现,也可以使用上述方法中的grid,table,flex,position实现