圣杯布局

最新推荐文章于 2022-12-30 00:06:40 发布
最新推荐文章于 2022-12-30 00:06:40 发布
阅读量96 收藏
点赞数
原文链接：http://www.cnblogs.com/scale/p/8493813.html
版权

CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

 

1.一个div固定，一个div自适应宽度。两种情况，固定在左或者在右。

HTML：

复制代码 
<div class="box1">
    <div class="main">
        内容自适应宽度
    </div>
    <div class="aside">
        侧栏固定宽度
    </div>
</div>
复制代码

这两种情况的HTML排版顺序都是一样的。

CSS：

右边固定宽度：

复制代码 
.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 110px;/*重要属性，这个值是侧栏的right值*/
}
.box1 .main {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: deepskyblue;
  float: left;
}
.box1 .aside {
  height: 50px;
  line-height: 50px;
  width: 100px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要属性，这个值是侧栏的宽度*/
  position: relative;
  right: -10px;/*重要属性，这个值是自身离其它div的间隙，即10px*/
}
复制代码

  左边固定宽度：

复制代码 
.box2 {
  clear: both;
  overflow: hidden;
  padding-left: 110px;/*重要属性，这个值是侧栏的left值*/
}
.box2 .aside {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性，设置-100%就能和内容栏同一行并覆盖内容栏*/
  position: relative;
  left: -110px;/*重要属性，该值是自身宽度与间隙之和*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

 　　总结：如果固定宽度div在左边，那么它就设置margin：-100%，left值就设置比它宽度大的值，比如上面的left：-110，这样就有10px的间隙，然后装它们的盒子设置padding-left，这个的值和固定宽度div的left值相等。内容栏除了浮动和宽度100%，其它的都不用设置。固定宽度的div在右边的时候，就把left，margin-left，padding-left改成right，margin-right，padding-right就可以了。

 

2.两个固定宽度，一个自适应宽度

HTML：

复制代码 
<div class="box1">
    <div class="main">
        内容自适应宽度
    </div>
    <div class="aside1">
        侧栏1固定宽度
    </div>
    <div class="aside2">
        侧栏2固定宽度
    </div>
</div>
复制代码

  这三种情况的HTML排版顺序也是一样的。

CSS：
两个固定宽度div都在右边：

复制代码 
.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 240px;/*重要属性，这个值是两个侧栏宽度加每个的间隙的值，这里间隙每个是10px，所以100+120+10+10=240*/
}
.box1 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要属性，这个值是该div的宽度*/
  position: relative;
  right: -10px;/*重要属性，这个值是自身间隙即10px*/
}
.box1 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，这个值是该div的宽度*/
  position: relative;
  right: -120px;/*重要属性，这个值是该div左边的div的宽度与间隙，加上自身间隙的值，即100+10+10=120，不要理解为自身的宽度哦*/
}
.box1 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

  两个固定宽度都在左边：

复制代码 
.box2 {
  clear: both;
  overflow: hidden;
  padding-left: 240px;/*重要属性，这个值是两个div宽度与间隙之和*/
}
.box2 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性，设置-100%能让该div和内容块成一行并覆盖*/
  position: relative;
  left: -240px;/*重要属性，这个值是padding-left的值*/
}
.box2 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性，设置-100%能让该div和内容块成一行并覆盖*/
  position: relative;
  left: -130px;/*重要属性，这个值是padding-left减去最左边div宽度与间隙的值*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

 一个固定宽度在左，一个固定宽度在右。自适应宽度在中间。

复制代码 
.box3 {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 110px;/*重要属性，这个值是左右两边div的宽度*/
}
.box3 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -110px;/*重要属性，这个值是自身宽度加上间隙*/
}
.box3 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，这个值是自身宽度*/
  position: relative;
  right: -10px;/*重要属性，这个值是自身离其它div的间隙*/
}
.box3 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

 　　总结：两个div固定宽度的情况，还是只操作固定宽度的div，自适应宽度的不管它。在左边的div就设置margi-left：-100%，left就是宽度与间隙的值；右边的就设置margin-right：负自身宽度，相对定位的right就是宽度与间隙的值。

 

 3.多个固定宽度，一个自适应宽度

 

HTML：

复制代码 
<div class="box1">
    <div class="main">
        内容自适应宽度
    </div>
    <div class="aside1">
        侧栏1固定宽度
    </div>
    <div class="aside2">
        侧栏2固定宽度
    </div>
    <div class="aside3">
        侧栏3固定宽度
    </div>
</div>
复制代码

三种情况的HTML排版顺序也一样。

CSS：

三个固定宽度div在最右边，自适应宽度div在左边

复制代码 
.box1 {
  clear: both;
  overflow: hidden;
  padding-right: 390px;/*重要属性，该值是每个div宽度与间隙之和*/
}
.box1 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -100px;/*重要属性，该值是该div的宽度*/
  position: relative;
  right: -10px;/*该值是自身离其它div的间隙*/
}
.box1 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，该值是该div的宽度*/
  position: relative;
  right: -120px;/*该值是该div的左边div宽度与间隙，加上自身间隙的值，即100+10+10=120*/
}
.box1 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要属性，该值是该div的宽度*/
  position: relative;
  right: -250px;/*该值是该div的左边div宽度与间隙，加上自身间隙的值，即100+10+120+10+10=250*/
}
.box1 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

两个固定宽度div在最左边，另一个在最右边，自适应宽度div在最中间

复制代码 
.box2 {
  clear: both;
  overflow: hidden;
  padding: 0 150px 0 240px;/*重要属性，左边的padding是两个div的宽度与间隙之和，右边的是一个div宽度与间隙之和*/
}
.box2 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -240px;/*重要属性，由于该div是在最左边的，所以left值是padding的left的值*/
}
.box2 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -130px;/*重要属性，该值是padding的left的值减去最左边的div宽度与间隙的值*/
}
.box2 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要属性，该值是该div宽度与间隙的值*/
  position: relative;
  right: -10px;/*重要属性，由于设置了margin-right之后，该div到了最右边，所以这里的right值是间隙值*/
}
.box2 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

一个固定宽度div在左边，另外两个在最右边，自适应宽度在中间

复制代码 
.box3 {
  clear: both;
  overflow: hidden;
  padding: 0 280px 0 110px;/*重要属性，padding的right值是右边两个div宽度与间隙的和；padding的left值是左边的div宽度与间隙的和*/
}
.box3 .aside1 {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-left: -100%;/*重要属性*/
  position: relative;
  left: -110px;/*重要属性，该值是该div宽度与间隙的值*/
}
.box3 .aside2 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -120px;/*重要属性，该值是该div宽度*/
  position: relative;
  right: -10px;/*重要属性，由于设置了margin-right，所以该值是间隙值*/
}
.box3 .aside3 {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: skyblue;
  float: left;
  margin-right: -140px;/*重要属性，该值是该div宽度*/
  position: relative;
  right: -140px;/*重要属性，该值是它紧邻的左边的div的宽度与间隙还有自身与div间隙的和，即120+10+10=140*/
}
.box3 .main {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: deepskyblue;
  float: left;
}
复制代码

 　　总结：多个div固定宽度，一个自适应的布局方式和两个固定宽度，一个自适应的布局方式也是同样的原理，只操作固定的div，自适应的不管，然后设置装它们的盒子的padding值。固定宽度div设置相对定位的left或者right值，设置margin-left或者margin-right的值。

 

　　圣杯布局最终总结：

　　1.HTML排版都是自适应div在最前面，然后是固定宽度div。

　　2.都设置float：left。

　　3.如果div在左边，则该div设置margin-left：-100%。如果div在右边，则该div设置margin-right：负自身宽度

　　4.在左边的div设置相对定位的left值，该值是自身的间隙。如果左边是多个div，那么当前div的left值就是它右边所有的div的宽度与间隙的和再加上自身的间隙的值。

　　5.在右边的div设置相对定位的right值，该值是自身的间隙。如果右边是多个div，那么当前div的right值就是它左边所有的div的宽度与间隙的和再加上自身的间隙的值。

　　6.这些div的外层的大盒子设置padding值，这个值是左边或者右边div的宽度与间隙的和。例如左边一个固定宽度的div，宽度为50，间隙是15；然后右边两个固定宽度的div，宽度分别是80、100，间隙都是10.那么padding值就应该设置为padding：0 200px 0 65px;

　　7.自适应div的宽度设置为100%，其它的都不用管。

转载于:https://www.cnblogs.com/scale/p/8493813.html

dengbeizhuo8768
关注
页面布局之圣杯布局
WL
04-26 1415
圣杯布局作为我们平时处理三列布局来说还是很有用的，一般情况下他要求的是中间宽度自适应，两边的宽度是固定的，这样能够在页面解析的时候能使中间的主要内容先解析。 首先写好布局和基本的样式如下 布局<body> <div class="header">header</div> <div class="main"> <div class="center">center
圣杯布局图解
Ivana_zyf的博客
01-24 2440
圣杯布局图解 圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，中间栏要在放在文档流前面以优先渲染。 1、给middle部分设 width:100%，给left、right设宽度，三者都 float:left。 2、给外面最大的块all设左右padding，把middle拉出来，这样left和right去了自己的位置之后就不会把middle内容盖住了。 ...
CSS 圣杯布局
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-23 373
圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。 CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架的栅格系统为代表，现广大框架的布局基本都是这种浮动布局方式。 圣杯布局有一个非常好的特点就是减少计算。设现在做一个三栏布局，那么要计算左-中-右三个盒子的宽度，使用圣杯布局只需要左-右两个盒子的宽度（是减少计算，不是不要计...
css --- > 圣杯布局
栗子好好吃的博客
09-26 150
圣杯布局 左右固定宽度,中间自适应 div:nth-child(1) section { display: flex; width: 60%; height: 150px; background-color: pink; margin: 0 auto; } section div:nth-child(1) { width: 100px; height: 150px...
如何做出双飞翼布局与圣杯布局
01-08
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
圣杯布局的三种实现
qq_58511059的博客
12-30 546
【代码】圣杯布局的三种实现。
HTML-圣杯布局
小头Sophia
12-15 1349
1.BFC：Block Formating Context（块级格式化上下文）   它是一个独立的渲染区域 BFC的作用： 1）用来清除浮动的问题 2）Margin合并的问题 3）多栏布局 2.圣杯布局和双飞翼布局实现的是同一种效果，但是实现方式有一点不同。 都实现的效果是：两侧盒子的宽度始终保持不变，中间的盒子自适应（三栏式的布局） 左右盒子相对定位 首先写中间的main盒子，
圣杯布局和双飞翼布局
Jancy的博客
03-24 383
圣杯布局三列布局，左右固定宽度，中间自适应，利用float、margin负值、position:relative实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局和双飞翼布局</title> <meta name="keywords" content="圣杯布局 双飞翼布局"
圣杯布局&双飞翼布局
zyy_0725的博客
12-08 215
圣杯布局&双飞翼布局
双飞翼布局、列表布局、圣杯布局、新浪布局
W_mizi的博客
11-04 204
双飞翼布局：中间自适应，两边固定 中间的盒子固定没有确定的宽度，根据margin来计算宽度，没有显性设置宽度，来达到自适应的目的 为了让left，right，contain放在一行内，使用了浮动布局。float：left left固定在整个浏览器的右边，根据margin-left的值来进行调整，移动contain的宽度，为了让left宽度固定，所以显性的设置了宽度 right在原本...
普通三栏式布局、圣杯布局、双飞翼布局
吞吞吐吐屠屠兔兔的博客
03-28 373
一、普通三栏式布局    1.用浮动布局    注意点：    (1)为了自适应，width值设为%形式，指的是父元素宽度的百分之多少    (2)浮动后，要给其父元素清除浮动，此代码用了伪类的方法.warp:after{display: block;clear: both;content: "";height: 0;}     代码如下：           演示如下：        2.用定位...
常用布局（浮动布局+绝对定位布局+圣杯布局）
07-31 1162
常用布局： 1.流式布局 2.浮动布局 3.绝对定位布局 4.圣杯布局 *{padding:0px;margin:0px;} body{color:#FFF;} /浮动布局/ /*.header{height:50px;background-color:#333;} .bd{height:150px;background-color:#999;} .footer
圣杯布局详解
konglei1996的博客
03-13 2993
本文为翻译文章，只解释了相对重要的部分，详细的内容还请自行看原文原文地址。 html部分： 就是这样，一个单独额外的div包含着你所需要的列。样式表很简单，就是说你有一个左边的宽度为200px的列，右边有一个宽度为150px的列，中间的列自适应。核心的css代码如下： 这种方式能够兼容现在的许多主流浏览器，例如：Safari, Opera, Firefox, and (with
Git创建创远程库，pull项目，push项目介绍
song91425的博客
09-21 341
Git创建创远程库，pull项目，push项目介绍 1.在本地初始化一个文件夹作为git项目，命令：git init git init //用"git init"初始化的版本库用户也可以在该目录下执行所有git方面的操作。 需要注意点是命令：git init -bare git init -bare git init –bare”方法创建一个所谓的裸仓库，之所以叫裸仓库是因为这个仓库只保存git历史提交 的版本信息，而不允许用户在上面进行各种git操作，如果你硬要操作的话，只会得到下面的错误 （”Th
css经典布局——圣杯布局
热门推荐
越努力，越幸运！
01-18 5万+
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。 效果图 原本录制了...
Amazon S3：S3静态网站托管教程.docx
最新发布
11-12
Amazon S3：S3静态网站托管教程.docx
双飞翼布局与圣杯布局实现解析
"双飞翼布局”和“圣杯布局”是两种常见的前端网页三栏布局技术，它们主要用于解决页面在不同分辨率设备上保持良好显示效果的问题，同时实现内容区域的优先加载，提高用户体验。这两种布局方式都实现了两边固定宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值