当前位置: 首页 > 面试题库 >

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

杨昆
2023-03-14
本文向大家介绍三栏布局的实现方式,尽可能多写,浮动布局时,三个div的生成顺序有没有影响?相关面试题,主要包含被问及三栏布局的实现方式,尽可能多写,浮动布局时,三个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实现

 

 类似资料:
  • 我需要前端做一个可以随时布局医院报告功能,就是病人看病的报道,我需要可以随时布局上面的信息,相当于表单布局的vue3的这功能,有没有这方面的三方库之类的,有知道的大神吗?

  • 问题内容: 我很好奇flexbox是否可以使用这种布局。我似乎无法得出第3和第4格归入第二。这对于浮点数来说非常容易,只是好奇是否缺少一些可能对flexbox有帮助的属性。 布局 标记 问题答案: Flexbox不喜欢在多列或多行中扩展的flex项目,因为实际上flexbox没有网格概念。 但是,使用一些技巧,您可以实现此布局(以及更复杂的布局): 使用行布局 │1│2│3│4│ └─┴─┴─┴─

  • 本文向大家介绍vue 实现 rem 布局或vw 布局的方法,包括了vue 实现 rem 布局或vw 布局的方法的使用技巧和注意事项,需要的朋友参考一下 一、实现 rem 布局 移动端 方法一、在 index.html 或者 main.js 中添加以下代码: 之后,在写 css 时,只要将 px 单位替换成 rem,这里设置的比例是 100px=1rem,例如,宽度为 100px 时,可以直接写成

  • 本文向大家介绍实现两列等宽布局的方式有哪些?相关面试题,主要包含被问及实现两列等宽布局的方式有哪些?时的应答技巧和注意事项,需要的朋友参考一下 .parent{ display:grid; grid-template-columns:repeat(2,50%); height:100px; }

  • 本文向大家介绍写一个三栏布局,两边固定,中间自适应相关面试题,主要包含被问及写一个三栏布局,两边固定,中间自适应时的应答技巧和注意事项,需要的朋友参考一下 position + margin float + margin flex

  • 本文向大家介绍JavaScript实现瀑布流布局的3种方式,包括了JavaScript实现瀑布流布局的3种方式的使用技巧和注意事项,需要的朋友参考一下 前言 今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。 一、JS 实现瀑布流 思路分析 1、瀑布流布局的特点是等宽不等高。 2、为了让