CSS 三栏布局之圣杯布局和双飞翼布局
主要介绍两种, 圣杯布局和双飞翼布局
两者都是实现左右两栏固定宽度, 中间自适应的三栏布局. 写了两个Demo, 实现了两种布局的效果, 点击可以预览
1. 圣杯布局
圣杯布局来源于文章 首先给出固定HTML样式, 注意中间的盒子要定义在前面先渲染
复制代码这是中间的盒子
这是左边的盒子
这是右边的盒子
1.1 首先给cotainer设置padding 撑开两边, 为两栏留出空间
.container { padding-left: 200px; padding-right: 150px;}复制代码 得到下图
1.2. 给三个盒子都设置浮动, 给左右盒子定死宽度, 中间自适应, 同时清除浮动
/*清除浮动*/.container::after { content: ""; display: block; clear: both;}.left, .right, .middle { float: left;}.left { width: 200px;}.right { width: 150px;}.middle { width: 100%;}复制代码 如此可以得到下图, 中间盒子占了100%, 因此占据了整行, 左右两个盒子被挤到了下面
接下来的工作就是将左右两个盒子放到预留的位置上
1.3 利用负margin将左右盒子放置预留位置
还需要使用position: relative;, 来辅助定位
.left, .right { position: relative;}.left { margin-left: -100%; left: -200px;}.right { margin-left: -150px; right: -150px;}复制代码 最终效果图
总样式
/* 公共样式 */.container { width: 800px; border: 1px dashed #dedede;}.container::after { content: ""; display: block; clear: both;}.left { width: 200px; background: #2DB3E4;}.right { width: 150px; background: #F37EC1;}.middle { width: 100%; background: #81B6AE;}.left, .right, .middle { float: left;}复制代码 布局样式
.container { padding-left: 200px; padding-right: 150px;}.left, .right { position: relative;}.left { margin-left: -100%; left: -200px;}.right { margin-left: -150px; right: -150px;}复制代码 2. 双飞翼布局
双飞翼布局, 源于淘宝UED 双飞翼布局需要更改DOM结构
复制代码这是中间的盒子
这是左边的盒子
这是右边的盒子
在圣杯布局中, 是通过给父容器设置padding, 用以给左右盒子留出空间 而在双飞翼布局中, 通过给中间的盒子中额外新增的div设置margin,
布局样式
.main { margin-left: 200px; margin-right: 150px;}.left { margin-left: -100%;}.right { margin-left: -150px;}复制代码 布局样式相对于圣杯布局简洁了不少, 不需要设置position: relative;来辅助定位
公共样式
p { margin: 0; padding-bottom: 20px;}.container { width: 800px; border: 1px dashed #dedede;}.container::after { content: ""; display: block; clear: both;}.left { width: 200px; background: #2DB3E4;}.right { width: 150px; background: #F37EC1;}.middle { width: 100%; background: #81B6AE;}.left, .right, .middle { float: left;}复制代码