圣杯布局和双飞翼布局的目的，都是左右两栏固定宽度，中间部分自适应。
示例目标：左200px，右100px，中间自适应，三部分高度一致。
布局思路：中间是身体，两边是翅膀，先把重要的身体部分放好，然后再将翅膀移动到适当的地方。
1.html代码中，中间部分放前面，然后是左边、右边。
2.将三部分都float:left
3.中间部分，width:100%
4.main占满了，左边部分margin-left: -100%，右边margin-left: -100px
5.中间部分的左右被左边部分和右边部分覆盖了，在中间增加个内层，设置margin：0 100px 0 200px
对应上方双飞翼布局：
1.相同
2.float: left相同，加上position: relative
3.相同
4.相同
5.中间部分加padding: 0 100px 0 200px，左右再处理。
1.左中右按顺序放在html中，float: left，
2.中间 width: calc(100% - 400px)
布局类型 浮动布局 流式布局 定位布局 flex布局 grid布局 布局详解 1.浮动布局。 浮动布局是利用flo...
布局方式 静态布局 浮动布局 定位布局 自适应布局 流式布局（百分比布局） 响应式布局 弹性布局 悬挂布局 圣杯布...
常用的五大布局(线性布局,相对布局,帧布局,表格布局,绝对布局) 1,线性布局 LinearLayout ...
六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。 圣杯布局 圣杯布局是指布...
基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局： 二列布局： 三列布局： ⚠️ midd...
七大布局：流线布局、等比缩放拓展布局、分栏布局、流动布局、重复布局、固定布局1.流线布局流线布局指在界面中的内容元...
前端基本布局分大致5种，table布局，float 布局，absolute布局，flexbox布局，grid布局。...
布局 说法一 浮动布局 绝对定位布局 Flex布局 Table-cell表格布局 网格布局 说法二 静态布局 流式...
flex布局的典型布局方式有哪些？ 网格布局 固定底栏布局 圣杯布局 输入框布局 悬挂布局 网格布局 最简单的网格...
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，a...
本文标题：三列布局
本文链接：https://www.haomeiwen.com/subject/ptdwaftx.html
网友评论