最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css+div三栏布局 左右固定宽 中间自适应
时间：2022-06-25 10:29:06 编辑：袖梨 来源：一聚教程网
三栏布局，这是一种相对比较常见的页面布局，这里提供2种实现方法：
方法1：
使用最新的css3伸缩盒布局属性，可轻松实现（三栏等高，默认就是三栏等高哟！）
| 代码如下 | 复制代码 |
页头100px 中间自适应 左边宽100px左边宽100px左边宽100px 右边宽150px | |
提示：你可以先修改部分代码再运行。
方法2：（不考虑三栏加载顺序,中间栏不用额外加层）
主要运用的是触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局的，源码如下：
| 代码如下 | 复制代码 |
这是头部 left right cont 触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局：不考虑三栏加载顺序,中间栏不用额外加层 防止.cont被隐藏：body{min-width:2x.left+.right} | |
提示：你可以先修改部分代码再运行。
方法3：（传说中的圣杯/双飞翼布局,中间自适应栏可优先加载）
主要运用的是浮动float 和margin的结合使用，源码如下：
| 代码如下 | 复制代码 |
这是头部 cont left right | |
提示：你可以先修改部分代码再运行。
从源代码上来看，要不讲究栏目加载顺序，方法1是比较简洁的；但要求自适应栏目优先加载，圣杯布局无疑是首选方案！
另外补充下，圣杯布局是比较灵活的一种布局方式：表现为不改动html结构，只调整css样式，即可实现各种布局，如用下面的任一代码替换上面方法2的对应部分即可实现不同布局：
.cont_inner{margin-right: 300px;background-color: #900;}
.left{background-color: #f00;margin-left: -300px;}
.right{float: left;background-color: #008080;margin-left:-150px;}
或
.cont_inner{margin-left: 300px;background-color: #900;}
.left{background-color: #f00;margin-left: -100%;}
.right{float: left;background-color: #008080;margin-left:-100%;position: relative;left: 150px;}
其它布局，请自行折腾组合 ^_^
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21