常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)
1. 两栏布局,左边定宽,右边自适应
//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>
1、左边左浮动,右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响
#left{float: left;width: 200px;background: green;
}
#right{overflow: hidden;background: red;
}
2. 三栏布局,圣杯布局、双飞翼布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
先预览最终布局效果:
圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异,不过都遵循了以下要点:
- 两侧宽度固定,中间宽度自适应
- 中间部分在DOM结构上优先,以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的
<div >
外层 标签
圣杯布局
1. DOM结构
<div id="header"></div>
<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
<div id="footer"></div>
首先定义出整个布局的DOM结构,主体部分是由container
包裹的center,left,right
三列,其中center
定义在最前面。
2. CSS代码
假设左侧的固定宽度为200px,右侧的固定宽度为150px,则首先在container上设置:
#container {padding-left: 200px; padding-right: 150px;
}
为左右两列预留出相应的空间,得到如下示意图:
随后分别为三列设置宽度与浮动,同时对footer设置清除浮动:
#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px;
}#right {width: 150px;
}#footer {clear: both;
}
得到如下效果:
根据浮动的特性,由于center
的宽度为100%
,即占据了第一行的所有空间,所以left
和right
被“挤”到了第二行。
接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距:
#left {width: 200px; margin-left: -100%;
}
得到:
随后还需要使用定位(position)方法:
#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}
这里使用position: relative
和right: 200px
将left的位置在原有位置基础上左移200px
,以完成left
的放置:
接下来放置right,只需添加一条声明即可:
#right {width: 150px; margin-right: -150px;
}
得到最终的效果图:
至此,布局效果完成。不过还需要考虑最后一步,那就是页面的最小宽度:要想保证该布局效果正常显示,由于两侧都具有固定的宽度,所以需要给定页面一个最小的宽度,但这并不只是简单的200+150=350px。回想之前left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px:
body {min-width: 550px;
}
综上所述,圣杯布局的CSS代码为:
body {min-width: 550px;
}#container {padding-left: 200px; padding-right: 150px;
}#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}#right {width: 150px; margin-right: -150px;
}#footer {clear: both;
}
关于圣杯布局的示例,可参考:圣杯布局
双飞翼布局
1. DOM结构
<body><div id="header"></div><div id="container" class="column"><div id="center"></div></div><div id="left" class="column"></div><div id="right" class="column"></div><div id="footer"></div>
<body>
双飞翼布局的DOM结构与圣杯布局的区别是用container
仅包裹住center
,另外将.column
类从center
移至container
上。
2. CSS代码
按照与圣杯布局相同的思路,首先设置各列的宽度与浮动,并且为左右两列预留出空间,以及为footer
设置浮动清除:
#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px;
}#right {width: 150px;
}#footer {clear: both;
}
得到如下效果示意图:
以上代码将container,left,right
设置为float: left
,而在container
内部,center
由于没有设置浮动,所以其宽度默认为container
的100%宽度,通过对其设置margin-left
和margin-right
为左右两列预留出了空间。
将left放置到预留位置:
#left {width: 200px; margin-left: -100%;
}
得到:
将right放置到预留位置:
#right {width: 150px; margin-left: -150px;
}
得到最终效果:
最后计算最小页面宽度:由于双飞翼布局没有用到position:relative进行定位,所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时,会挤占中间栏的宽度,使得其内容被右侧栏覆盖,如下所示:
因此在设置最小页面宽度时,应该适当增加一些宽度以供中间栏使用(假设为150px),则有:
body {min-width: 500px;
}
至此双飞翼布局大功告成!其布局整体代码为:
body {min-width: 500px;
}#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; margin-left: -100%;
}#right {width: 150px; margin-left: -150px;
}#footer {clear: both;
}
关于双飞翼布局的示例,可参考:双飞翼布局
总结与思考
通过对圣杯布局和双飞翼布局的介绍可以看出,圣杯布局在DOM结构上显得更加直观和自然,且在日常开发过程中,更容易形成这样的DOM结构(通常<aside>
和<article>/<section>
一起被嵌套在<main>
中);而双飞翼布局在实现上由于不需要使用定位,所以更加简洁,且允许的页面最小宽度通常比圣杯布局更小。
使用flex
这里使用flex还是需要与圣杯布局相同的DOM结构,不过在实现上将更加简单:
<!-- DOM结构 -->
<div id="container"><div id="center"></div><div id="left"></div><div id="right"></div>
</div>
CSS代码如下:
#container {display: flex;
}#center {flex: 1;
}#left {flex: 0 0 200px;order: -1;
}#right {flex: 0 0 150px;
}
本文引用了[https://www.jianshu.com/p/81ef7e7094e8]内容,感谢原作者付出。
常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)相关推荐
- 表头样式_1分钟学会制作Word两栏、三栏表头
在做Word表格时,时常需要用到两栏.三栏的表头,一般你是如何操作?今天和大家分享相应的制作技巧. 1.边框法 选中单元格,点击开始--段落--边框--斜下边框即可完成两栏表头的制作. 如何输入表头内 ...
- html双翼布局,第19题 CSS如何实现双飞翼布局?
双飞翼布局如下图所示: 有了圣杯布局的铺垫,双飞翼布局也就问题不大啦.这里采用经典的float布局来完成. HTML代码: 双飞翼布局 码云笔记 mybj123.com CSS代码: *{ margi ...
- html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局 三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
- html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法,中间自适应,左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- html三栏式布局图,div布局的自由伸展三栏式版面
#middlebox { margin: 0 34% 0 170px; border-left: 2px solid #000; border-right: 2px solid #000; paddi ...
- html5 两栏等宽布局代码,分三栏栏宽相等 如何将合并的一段分为等宽三栏,栏宽为4.5厘米...
将正文的最后一段分成等宽的三栏,栏间加分隔线.将正文的最后一段分成等宽的三栏,栏间加分隔线. 方法步骤如下: 打开需要操作的WORD文档,选中正文最后一段,点击页面布局中的"更多分栏&quo ...
- 自适应+两栏三栏布局
自适应 宽度自适应 高度自适应 窗口的自适应 动态计算宽度和高度 如何实现两栏或者三栏布局 宽度自适应 概念:不设置宽度的话就是宽度自适应,通常情况下,默认不设置宽度,width的取值为auto 特点 ...
- CSS多栏布局-两栏布局和三栏布局
目录 前言 ------两栏布局 一.左列定宽,右列自适应 1.浮动+margin 2.浮动+BFC 3.定位 4.flex 5.浮动+负外边距 6.table布局 二.左列不定宽,右列自适应 1.f ...
- 用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
最新文章
- 重磅推出:AutoProject Studio 自动化项目生成器
- python 特征选择卡方_特征选择
- 【OpenGL】九、OpenGL 绘制基础 ( OpenGL 状态机概念 | OpenGL 矩阵概念 )
- wxWidgets:最小的 wxWidgets 示例
- JavaScript——语法
- 希沃集控系统流媒体服务器未开启,希沃集控,让教育信息化管理尽在“掌控”之中...
- 机器搜索引擎 vs 人肉搜索引擎(作者:胡宝介)
- 动态推荐系统关键技术研究(一)
- HTML转PDF(Thymeleaf做模板)
- 高一计算机算法教案,教科版 高一信息技术 必修1 第四单元 4.2 数值计算 教案...
- 一、Maven-单一架构案例(创建工程,引入依赖,搭建环境:持久化层,)
- 工业设备数字孪生白皮书
- 利用python构建马科维茨_使用CVXOPT包实现马科维茨投资组合优化
- BootDo架构-基于 Springboot 和 Mybatis 的后台管理系统
- chrome绿色版制作方法
- 完全k叉树(CCPC-Wannafly Comet OJ 夏季欢乐赛(2019) A)
- 开源中国源码学习(六)——ButterKnife的使用
- 网页在线客服系统-im及时聊天工具socket代码
- 云边端协同EasyCVR平台语音对讲配置的注意事项汇总
- cpu温度过高 ubuntu_Ubuntu环境下检查CPU 的温度