168

问答题 168 /501

三栏布局的实现方式,尽可能多写,浮动布局时,三个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实现