圣杯布局详解--浮动

圣杯布局是什么：

圣杯布局是两边固定宽度，中间自适应的三栏布局。
中间栏放到文档流前面，先行渲染。
目的是为了解决三栏布局。

浮动实现：

实现效果：

首先HTML：

头部<header></header>标签，
内容区域<div class="container"></div>里面包含中、左、右三个 div 标签。
底部<footer></footer>标签

HTML代码：

 //标题<header><h4>Header内容区</h4></header>//内容区<div class="container">//中间区域<div class="middle column"><h4>中间区域</h4><p>圣杯布局要求header和footer各自占领屏幕所有宽度，高度固定中间的container是一个三栏布局三栏布局两侧宽度固定不变，中间部分自动填充整个区域中间部分的高度是三栏中最高的区域的高度</p></div>//左边区域<div class="left column"><h4>左边栏</h4></div>//右边区域<div class="right column"><h4>右边栏</h4></div>//清除浮动<div style="clear: both"></div></div>//底部<footer><h4>Footer内容区</h4></footer>

CSS代码：

     *{margin: 0;padding: 0;}body{min-width: 550px;}header{height: 40px;background-color: #50a0c3;padding-top: 10px;text-align: center;line-height: 40px;color: white;}.container{padding-left: 200px;padding-right: 150px;}.column{float: left;}.middle{width: 100%;height: 350px;background-color: salmon;text-align: center;padding-top: 50px;}.left{width: 200px;height: 400px;background-color: #d8e6a4;margin-left: -100%;position: relative;right: 200px;text-align: center;line-height: 400px;}.right{width: 150px;height: 400px;text-align: center;line-height: 400px;background-color: #bed28c;position:relative;margin-left: -150px;right:-150px;}footer{width: 100%;height: 40px;background-color: #5b6063;text-align: center;line-height: 40px;}

首先我们设置中间三栏中、左、右三个div浮动。
我们设置中间 <div class="middle"></div>的css宽度为100%占满整个大div,那么此时左右div块会被挤到下方去。（如下图所示）
此时我们要设置外层内容区域的div左右padding以便给左右div回来时候一个位置。(效果如下图所示)
接下来我们要使左边栏回到上一行我们要给<div class="left"></div>一个相对定位（相对于其正常位置进行定位）position:relative和margin-left:-100%（为什么是100%？因为设置100%后它可以刚好和middle中间栏的左侧对齐）;
我们要给<div class="left"></div>添加right: 200px;样式属性使其回到第一行的最左侧。
我们给右栏一个margin-right: -150px;position:relative;right: -150px;使其回到原来位置，那么这个布局就完成啦。

圣杯布局详解--浮动相关推荐

HTML经典布局之圣杯布局详解
圣杯布局预览如下在遇到以下两个要求时(也是圣杯布局的特点),就需要使用到圣杯布局三栏布局中,左栏和右栏需要固定宽,中间栏自动占满剩余宽度要求中间栏优先渲染示例代码如下,为了方便快速阅读和理解, ...
Holy Grail 圣杯布局详解
Introduction I'm sorry. Really. I didn't name it. I don't mean to overstate its importance or trivia ...
css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
【C++】C++对象模型：对象内存布局详解（C#实例）
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
Linux进程地址空间与进程内存布局详解，内核空间与用户空间
Linux进程地址空间与进程内存布局详解程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表内嵌样式表:必须写在head标签里例: p { 样式;} he ...
（淘宝无限适配）移动手机端rem布局详解（转载非原创）
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...

圣杯布局详解--浮动

圣杯布局是什么：

浮动实现：

圣杯布局详解--浮动相关推荐

最新文章

热门文章