栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

三栏布局的实现方式,尽可能多写,浮动布局时,三个div的生成顺序有没有影响?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/365015.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号