圣杯布局与双飞翼布局
圣杯布局与双飞翼布局
- 圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。(中间先加载渲染)
圣杯布局 * {
padding: 0;
margin: 0;
}html,
body {
padding: 0;
margin: 0;
}body {
min-width: 550px;
}* {
margin: 0;
padding: 0;
}.header,
.footer {
background: gray;
width: 100%;
}.footer {
clear: both;
}.main {
height: 200px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}.left,
.center,
.right {
float: left;
}.center {
width: 100%;
height: 200px;
background: red;
}.left {
width: 200px;
height: 200px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}.right {
width: 150px;
height: 200px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}头部中间中间中间中间中间中间中间后
左边
右边底部双飞翼布局-Example
双飞翼布局 * {
margin: 0;
padding: 0;
}.main>div {
float: left;
}.left {
width: 200px;
background: red;
margin-left: -100%;
}.right {
width: 200px;
background: blue;
margin-left: -200px;
}.middle {
width: 100%;
background: yellow;
}.content {
margin-left: 200px;
margin-right: 200px;
}中间左边右边
优点
-
- 兼容性好，兼容若有主流浏览器，包括万恶的IE6
-
- 可以实现主要内容的优先加载
- 其实三列布局的方式还有很多 ，但也有各自的缺点
- 1.如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置（否则是相对浏览器可视区域）这样会层级，页面控制相对麻烦
- 2.用浮动布局的话， 中间层要做到先加载实现不了
- 3.flex布局低版本浏览器有些还不支持
Thinking in JackDan
推荐阅读
- 投稿|宗庆后未圆的酒布局，宗馥莉能接棒吗？
- Win10系统搭建Apache与PHP环境的办法
- SOAP与REST Web服务的区别
- Nuxt.js|Nuxt.js 3默认default布局
- win8系统切换输入键与别的按键起冲突怎样办
- Android（控件布局（相对布局）RelativeLayout）
- 解决手机助手与 android sdk 的adb 冲突问题
- 创建发布实体以及与用户实体的多对一关系
- WinXP默认网关查询的办法与步骤
- WinXP系统tbi文件怎样打开？打开tbi文件的办法与步骤