精华内容
下载资源
问答
  • 圣杯布局
    2022-05-30 18:08:10

    圣杯布局&双飞翼布局

    所谓圣杯布局和双飞翼布局其实解决的问题是相同的,都是解决左右两栏固定宽度,中间部分自适应,其中某部分内容比其他内容高的时候,保证三者元素等高。
    他俩的区别就是:圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。

    圣杯布局

    以下面html为例:

    <body>
        <div class="content">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>

    1.main、left、right全部左浮动,在设置一个position:relative稍后会用到。
    2.main的宽度设置为100%。left和right固定宽度(假设100px)。
    3.此时main自己沾满了一行,所以给left拽上来设置marginleft:100%,此时left虽然上来了但是是覆盖在main上面的。
    4.给content设置padding-left等于left的宽,此时左边有100px的空白,main和left都被挤过来了,要想还原,将left向左在移动100px就行了。
    5.此时就剩下right在下面,同理margin-right:-100%就上去了。

    css代码:

      <style>
            * {
                box-sizing: border-box;
            }
            .content {
                overflow: hidden;
                padding-left: 100px;
                padding-right: 100px;
            }
            .content > div {
                float: left;
                position: relative;
            }
            .main {
                width: 100%;
                height:100px;
                border:1px solid red;
            }
            .left {
                width:100px;
                margin-left: -100px;
                right:100%;
                height:100px;
                border:1px solid #000;
            }
            .right {
                width:100px;
                margin-right: -100px;
                height:100px;
                border:1px solid #000;
            }
    
        </style>

    双飞翼布局

    双飞翼布局的html:

        <div class="content">
            <div class="main">
                <div class="main-inner">main</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>

    对比一下css的区别:多了一个.main-inner,少了一些相对定位。

        <style>
            * {
                box-sizing: border-box;
            }
    
            .main-inner {
                margin-left:100px;
                margin-right: 100px;
            }
    
            .content {
                overflow: hidden;
                /* padding-left: 100px;
                padding-right: 100px; */
            }
            .content > div {
                float: left;
                /* position: relative; */
            }
            .main {
                width: 100%;
                height:100px;
                border:1px solid red;
            }
            .left {
                width:100px;
                margin-left: -100%;
                /* right:100px; */
                height:100px;
                border:1px solid #000;
            }
            .right {
                width:100px;
                /* margin-right: -100px; */
                margin-left: -100px;
                height:100px;
                border:1px solid #000;
            }
    
        </style>

    Flex布局

    相比较两者,Flex布局就好理解得多
    html和圣杯布局一样
    css:

     <style>
            * {
                box-sizing: border-box;
            }
            .content {
                overflow: hidden;
                display:flex;
                flex:1
            }
       
            .main {
                flex:1;
                height:100px;
                border:1px solid red;
            }
            .left {
                flex:0 0 100px;
                order:-1;
                height:100px;
                border:1px solid #000;
            }
            .right {
                flex:0 0 100px;
                height:100px;
                border:1px solid #000;
            }
    
        </style>
    更多相关内容
  • 双飞翼布局和圣杯布局  网页开发中,经常会遇见左中右垂直三栏的布局方式,两侧结构宽度固定,中间自适应,有时候需要优先加载中间区域,那么便在DOM结构上便有所要求,需要中间区域在前,左右区域在后。  首先三...
  • 说起网站布局,之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样,把各种需要的组件一摆,然后设个宽高给个定位不就...而今天我们的主题,“双飞翼布局”与“圣杯布局”就是一个两边固定,中间宽度自适应,并
  • 圣杯布局这是圣杯布局
  • 圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局,感兴趣的朋友一起学习吧
  • 圣杯布局

    千次阅读 2018-08-14 23:11:17
    题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。  要求:允许增加额外的DOM节点,但不能修改现有节点...

    转载: https://blog.csdn.net/wangchengiii/article/details/77926868

    题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 
    要求:允许增加额外的DOM节点,但不能修改现有节点顺序。

    <div class="container"> 
      <div class="main">main</div> 
      <div class="left">left</div> 
      <div class="right">right</div> 
    </div>

       圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象一下圣杯是主体是加上两个耳朵;鸟儿是身体加上一对翅膀),圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师(传说是玉伯)改进并传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

    • 三列布局,中间宽度自适应,两边定宽;

    • 中间栏要在浏览器中优先展示渲染;

    • 允许任意列的高度最高;

    可以看出我们题目的要求跟圣杯布局和双飞翼布局要求一样。

    下面我们看看具体的实现方法。

    方法一:圣杯布局

    1.设置基本样式

    为了高度保持一致给left main right都加上min-height:130px。


    2.圣杯布局是一种相对布局,首先设置父元素container的位置: 
      

    实现效果是左右分别空出200px和300px区域,效果如图:

    3.将主体部分的三个子元素都设置左浮动

    出现了如下情况,怎么办,别着急慢慢来:

    4.设置main宽度为width:100%,让其单独占满一行

    5.设置left和right 负的外边距

      我们的目标是让left、main、right依次并排,但是上图中left和right都是位于下一行,这里的技巧就是使用负的margin-left: 
       
     
      负的margin-left会让元素沿文档流向左移动,如果负的数值比较大就会一直移动到上一行。关于负的margin的应用也是博大精深,这里肯定是不能详细介绍了。 
      设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度,由于left左边是父元素的边框,所以left继续跳到上一行左移,一直移动到上一行的开头,并覆盖了main部分(仔细观察下图,你会发现main里面的字“main”不见了,因为被left遮住了),left上移过后,right就会处于上一行的开头位置,这时再设置right部分margin-left为负的宽度,right就会左移到上一行的末尾。 

    6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

    至此,我们完成了三列中间自适应的布局,也就是传说中的圣杯布局。完整的代码如下:

    方法二:双飞翼布局

      圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。 
      他的HTML结构发生了变化: 
       

    直接贴出代码,读者可以自行参透他们的异同:

      双飞翼布局比圣杯布局多使用了1个div,少用大致4个css属性(圣杯布局container的 padding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,;而双飞翼布局子div里用margin-left和margin-right共2个属性,比圣杯布局思路更直接和简洁一点。简单说起来就是:双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了

    想知道更多关于圣杯布局和双飞翼布局,请参考:

       圣杯布局和双飞翼布局的作用和区别 
       CSS布局 – 圣杯布局 & 双飞翼布局

    方法三:Flex布局

      Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 
      任何一个容器都可以指定为 Flex 布局,所以Flex 布局将成为未来布局的首选方案。

      对于Flex布局的一些具体语法实现,可参见阮一峰大神的Flex 布局教程:语法篇;网友 JailBreak 为Flex布局制作了 Demo,可以参考。

      想了解Flex布局的具体实例可参见阮一峰大神的Flex 布局教程:实例篇;想直接查看Flex布局实例,你可以到直接到codepen查看Demo。 
       
    接下来讲一下此实例的具体实现: 
    1.首先将container块设置为一个Flex容器

      那么container下属的main、left和right这三个子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。 
       
    2.对这三个项目做初始设置 
       

    项目根据内容进行弹性布局

     
    3.通过order属性设置排列顺序

      可以看出三个项目的排序方式不一样了,main排在了第一个,要让main在中间,left在左边,可以通过Flex容器下的项目的属性“order”属性来设置:

    对于order属性:定义项目的排列顺序,越小越靠前,默认为0

    4.通过项目属性flex-grow设置main的放大比例,将空余的空间用main来填充,使三个项目不满一整行;默认为0,也就是对剩余空间不做处理。

    5.通过项目属性flex-basis 设置left和right的固定宽度

    这样就实现了我们的目标,是不是很简单?这就是flex布局的魅力。。。

    6.最后,完整的代码如下:

    方法四:绝对定位布局

      绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 
       
      提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

    言归正传: 
      绝对定位,就相当于万金油一样的存在,不论什么样的布局,使用绝对定位都能实现,所以对于具体的实现过程就不赘述,下面直接上代码,不懂的call我:

    实现结果当然是一样的啦!

    (完) 
      

     

    思路:

    1、圣杯布局方式适合三列布局,中间宽度自适应,两边定宽;

    2、左右两边定宽,因此给left,right固定的宽;

    3、3栏在一排显示,所以可以给他们浮动float;

    4、借助margin值可以为负的原理,当margin负值超过本身宽度时,会自动移动到上一行,所以可给,left,right设置了负值;

    主要思路就好似上面滴;我也看到有一个博主写的很好,所以我就抛砖引玉一下,附上地址咯!

    博主地址:https://blog.csdn.net/wangchengiii/article/details/77926868

    展开全文
  • 前端常用两种布局方式:双飞翼布局以及圣杯布局
  • 双飞翼布局与圣杯布局 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。 特点: 两侧宽度固定,中间宽度自适应(三栏布局...

    双飞翼布局与圣杯布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。

    特点:

    1. 两侧宽度固定,中间宽度自适应(三栏布局)
    2. 中间部分在DOM结构上有限,以便先行渲染
    3. 允许三列中的任意一列成为最高列
    4. 只需要使用一个额外的div标签

    圣杯布局:
    DOM结构:

    <div class="header"></div>
    <div class="container">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
    

    首先定义出整个布局的DOM结构,主体部分是由container包裹的center,left,right三列,其中center定义在最前面。

    CSS代码:
    假设左侧的固定宽度为200px,右侧的固定宽度为150px,则首先在container上设置:

    #container {
      padding-left: 200px;
      padding-right: 200px;
    }
    

    为左右两列预留出相应的空间,得到如下示意图:

    image

    随后分别为三列设置宽度与浮动,同时对footer设置清除浮动:

    #container .column {
      float: left;
    }
    
    #center {
      width: 100%;
    }
    
    #left {
      width: 200px; 
    }
    
    #right {
      width: 150px; 
    }
    
    #footer {
      clear: both;
    }
    

    得到如下效果:

    image

    根据浮动的特性,由于center的宽度为100%,即占据了第一行的所有空间,所以leftright被“挤”到了第二行。

    接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距(nagetive margin)

    #left {
      width: 200px; 
      margin-left: -100%;
    }
    

    得到:

    image

    随后还需要使用定位(position)方法:

    #left {
      width: 200px; 
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
    

    这里使用position: relativeright: 200pxleft的位置在原有位置基础上左移200px,以完成left的放置:

    image

    接下来放置right,只需添加一条声明即可:

    #right {
      width: 150px; 
      margin-right: -150px; 
    }
    

    得到最终的效果图:

    image

    最后,为了保证布局效果的正常显示,我们要给页面设置一个最小宽度。由于两侧都有固定宽度,而left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

    body {
      min-width: 550px;
    }
    

    圣杯布局代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        body {
          min-width: 550px;
        }
    
        #container {
          padding-left: 200px;
          padding-right: 150px;
        }
    
        #container .column {
          float: left;
        }
    
        #center {
          width: 100%;
          background: cadetblue;
        }
    
        #left {
          width: 200px;
          margin-left: -100%;
          position: relative;
          right: 200px;
          background-color: coral;
        }
    
        #right {
          width: 150px;
          margin-right: -150px;
          background-color: skyblue;
        }
    
        #footer {
          clear: both;
          height: 100px;
          background-color: beige;
        }
    
        #header {
          height: 100px;
          background-color: brown;
        }
      </style>
    </head>
    
    <body>
      <div id="header">header</div>
      <div id="container">
        <div id="center" class="column">center</div>
        <div id="left" class="column">This is the main content.
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
          esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
          dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
    
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
          esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
          dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
        <div id="right" class="column">This is the right sidebar.
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
          esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
          dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
      </div>
      <div id="footer">footer</div>
    </body>
    
    </html>
    

    双飞翼布局
    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

    CSS:
    按照与圣杯布局相同的思路,首先设置各列的宽度与浮动,并且为左右两列预留出空间,以及为footer设置浮动清除:

        .column {
          float: left;
        }
    
        #container {
          width: 100%;
        }
    
        #center {
          margin-left: 200px;
          margin-right: 150px;
          background: cadetblue;
        }
    
        #left {
          width: 200px;
          background-color: coral;
        }
    
        #right {
          width: 150px;
          background-color: skyblue;
        }
    
        #footer {
          clear: both;
          background-color: beige;
        }
    
        #header {
          background-color: brown;
        }
    

    得到如下效果图:

    image

    left放置到预留位置:

    #left {
      width: 200px; 
      margin-left: -100%;
    }
    

    得到:

    image

    right放置到预留位置:

    #right {
      width: 150px; 
      margin-left: -150px;
    }
    

    得到

    image

    最后计算最小页面宽度:由于双飞翼布局没有用到position:relative进行定位,所以最小页面宽度应该为200+150=350px但是当页面宽度缩小到350px附近时,会挤占中间栏的宽度,使得其内容被右侧栏覆盖,如下所示:

    image

    因此在设置最小页面宽度时,应该适当增加一些宽度以供中间栏使用(假设为150px),则有:

    body {
      min-width: 500px;
    }
    

    双飞翼布局代码如下所示:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        body {
          min-width: 500px;
        }
    
        .column {
          float: left;
        }
    
        #container {
          width: 100%;
        }
    
        #center {
          margin-left: 200px;
          margin-right: 150px;
          background: cadetblue;
        }
    
        #left {
          width: 200px;
          margin-left: -100%;
          background-color: coral;
        }
    
        #right {
          width: 150px;
          margin-left: -150px;
          background-color: skyblue;
        }
    
        #footer {
          clear: both;
          background-color: beige;
        }
    
        #header {
          background-color: brown;
        }
      </style>
    </head>
    
    <body>
      <div id="header">header</div>
      <div id="container" class="column">
        <div id="center">This is the main content.
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
          esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
          dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
    
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
          lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
          esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
          dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
      </div>
      <div id="left" class="column">This is the left sidebar.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
        molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
      <div id="right" class="column">This is the right sidebar.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
        molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</div>
      <div id="footer">footer</div>
    </body>
    
    </html>
    

    对比圣杯布局和双飞翼布局

    • 圣杯布局结构上更加自然和直观,在平时的开发中更容易形成这样的布局结构;
    • 双飞翼布局由于不使用定位,所以更加简洁,允许页面的最小宽度小于圣杯布局。
    展开全文
  • 简易版圣杯布局,实现高度自适应,左右宽度固定,中间宽度也是自适应。
  • css实现三栏布局---双飞翼布局和圣杯布局

    圣杯布局

    两侧宽度固定,中间宽度自适应的三栏布局

    • 两侧宽度固定,中间宽度自适应
    • 中间一栏需要先渲染,所以dom结构上优先
    • 一个额外的div标签

    圣杯布局的dom结构

    <div id="header">HEADER</div>
    <div id="container">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left100</div>
      <div id="right" class="column">right150</div>
    </div>
    <div id="footer">FOOTER</div>
    

    初始的css,给每个块设置颜色区分,左边栏设置宽度为100px,右边栏宽度为150px。

    div{
      text-align:center;
    }
    #header{
      width: 100%;
      background-color: #c9c9c9;
    }
    #footer{
      width: 100%;
      background-color: #c9c9c9;
      clear:both;
    }
    #center{
      width:100%; 
      background-color: pink;
    }
    #left{
      width: 100px;
      background-color: green;
    }
    #right{
      width: 150px;
      background-color: red;
    }
    .column{
      float:left;
    }
    

    初始结构

    根据左右栏设置的宽度,给容器container设置内边距,因为center栏width:100%,参考的是父容器的宽度。中间栏的宽度随着父容器设置内边距而缩小,效果如下图。

    #container{
      padding-left:100px;
      padding-right:150px;
    }
    

    父容器设置内边距之后

    么接下来就是将左右栏放到center两边,三栏都浮动,使用外边距负值来移动。

    因为浮动,上一行空间不够,left和right被挤下来了。

    个人是这样理解:

    1.首先 ****浮动原理:****将盒子移到一边,直到碰到左边缘或者右边缘碰到包含块或者另一个浮动框的边缘。

    2.所以left实际是紧贴center的最右边。

    给左栏设置margin-left: -100%; 这里的100%是参照父元素宽度,也就是center的宽度,所以现在左栏跑到center最左边,如下图

    #left{
      width: 100px;
      background-color: green;
      margin-left: -100%;
    }
    

    左栏外边距负值

    现在左边栏离左边还有100px的距离(container的内边距所致),这里设置定位+偏移即可。

    #left{
      position: relative;
      right:100px;
      width: 100px;
      background-color: green;
      margin-left: -100%;
    }
    

    左边栏完成

    最后剩下右边栏,此时右边栏是紧贴center这个浮动边框的边缘,这里右边栏有两种方法。

    1.可以设置margin-left负值 + 定位 (与上面左栏同理可以实现)。

    2.也可以直接设置margin-right 。

    这里实现第二种方法

    #right{
      width: 150px;
      background-color: red;
      margin-right:-150px;
    }
    

    为什么margin-right:-150px可以呢?

    个人理解是:原本右边栏就是因为上一行宽度不够,被挤下来了,所以使用margin-right:-150px,右边栏此时宽度可以理解为被压缩为0.

    所以就能和center在同一行,刚好之前设置padding预留了距离,就实现了效果。

    右边栏压缩

    最终效果:
    最终效果.png

    最后附上完整的css

    body {
        min-width: 350px;
      /*最后保证布局正常,给body设置最小宽度 */
    }
    div{
      text-align:center;
    }
    #header{
      width: 100%;
      background-color: #c9c9c9;
    }
    #footer{
      width: 100%;
      background-color: #c9c9c9;
      clear:both;
    }
    #container{
      padding-left:100px;
      padding-right:150px;
    }
    #center{
      width:100%; 
      background-color: pink;
    }
    #left{
      position: relative;
      right:100px;
      width: 100px;
      background-color: green;
      margin-left: -100%;
    }
    #right{
    /*   position: relative;
      left:150px; */
      width: 150px;
      background-color: red;
    /*   margin-left: -150px; */
      margin-right:-150px;
    }
    .column{
      float:left;
    }
    
    

    双飞翼布局

    双飞翼布局和圣杯布局结构略有差异,如下

     <div id="header">header</div>
      <div id="container" class="column">
        <div id="center">center</div>
      </div>
      <div id="left" class="column">left100 </div>
      <div id="right" class="column">column150</div>
      <div id="footer">footer</div>
    

    完整css如下所示,思路其实和圣杯布局差不多。不同的是将center单独用container包裹。并对container设置浮动而不是center。

    1、center继承container的宽度,然后center设置外边距,留出左右两栏的空间。

    2、左栏紧贴container浮动盒子的最右侧,因为空间不够被挤下来,所以设置margin-left:-100%; 即可

    3、至此右边栏紧贴container浮动盒子的最右侧,只需要移动右栏自身即可,所以margin-left:-150px;

    #container {
      width: 100%;
    }
    
    .column {
      float: left;
    }
    
    #center {
      margin-left: 100px;
      margin-right: 150px;
      background-color: pink;
    }
    
    #left {
      width: 100px; 
      background-color: green;
      margin-left:-100%;
    }
    
    #right {
      width: 150px; 
      background-color: red;
      margin-left:-150px;
    }
    
    #footer {
      clear: both;
      background-color: #c9c9c9;
    }
    #header{
      background-color: #c9c9c9;
    }
    

    总结:

    两种布局都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局

    • 两侧宽度固定,中间宽度自适应
    • 中间部分在DOM结构上优先,以便先行渲染
    • 允许三列中的任意一列成为最高列
    • 实现中间自适应都参考到父盒子的width,使用到float+margin来实现

    优缺点

    但是都不可避免的新增一个

    便签来控制center宽度。

    圣杯布局还是用了定位+位移,代码较复杂。但是dom结构清晰

    双飞翼布局,不需要使用定位,换来dom结构的不友好。

    其他实现方式:

    1、clac()calc()支持到IE9

    在双飞翼布局的思路,去掉多余的div,直接设置center浮动

    <div id="header"></div>
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
    <div id="footer"></div>
    
    #center {
      margin-left: 100px;
      margin-right: 150px;
      width: calc(100% - 250px);
    }
    

    2、flex

    flex的dom结构和圣杯布局一样

    <div id="container1">
      <div id="center1">center</div>
      <div id="left1">left100</div>
      <div id="right1">right150</div>
    </div>
    

    主要使用order:-1,实现左栏靠左。

    #container1{
      display:flex;
    }
    #center1{
        flex:1;
       background-color: pink;
    }
    #left1{
      flex:0 0 100px;
      background-color: green;
      order:-1;
    }
    #right1{
      flex:0 0 150px;
       background-color: red;
    }
    

    相关文章:https://www.jianshu.com/p/81ef7e7094e8

    展开全文
  • 圣杯布局详解

    2022-03-21 22:21:14
    圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。 原理: 圣杯布局为了让中间div内容不被遮挡,将中间div设置了padding-left和padding-right...
  • 适合前端新手小白的布局方面小技巧,内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等,解决浮动元素高度失效和相邻垂直外边距重叠问题,同时还解决ie6下fixed失效问题。
  • 圣杯布局和双飞翼布局的原理探究

    千次阅读 2020-11-25 09:43:50
    浮动布局并不是再是流行的布局方式,不过基于浮动的经典布局还是经常出现在前端面试中,圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式,要求主要中间内容优先渲染,...
  • 圣杯布局和双飞翼布局的区别

    千次阅读 2021-04-04 12:05:35
    圣杯布局和双飞翼布局的相同点和不同点
  • 圣杯布局代码分享
  • css实现圣杯布局

    2022-05-23 14:38:45
    圣杯布局和双飞翼之间,最好是先看圣杯布局,再看双飞翼,这样更能对比差异。 个人认为圣杯布局主要注意parent的padding属性设置和左右的left属性设置。
  • 使用flex实现圣杯布局

    2022-06-12 20:50:11
    使用flex实现经典的圣杯布局
  • HTML经典布局之圣杯布局详解

    千次阅读 2021-07-01 23:30:27
    圣杯布局预览如下 在遇到以下两个要求时(也是圣杯布局的特点),就需要使用到圣杯布局 三栏布局中,左栏和右栏需要固定宽,中间栏自动占满剩余宽度 要求中间栏优先渲染 示例代码如下,为了方便快速阅读和理解,...
  • 圣杯布局与双飞翼布局
  • CSS经典布局--圣杯布局和双飞翼布局

    千次阅读 2022-07-10 11:39:49
    CSS经典布局--圣杯布局和双飞翼布局
  • 圣杯布局实现

    千次阅读 2022-02-24 17:18:26
    圣杯布局,利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再...
  • css 三列布局 圣杯布局 不像Flexbox或Grid布局可以控制元素显示的次序,圣杯布局是通过浮动元素和外边距属性实现三列布局,但最重要的一点是,在文档中需要将优先渲染的内容写在最前方,但显示时看起来却好像是按照...
  • 圣杯布局和双飞翼布局
  • css圣杯布局

    2021-07-18 15:46:29
    圣杯布局 圣杯布局属于三列自适应布局,两侧固定,中间的区域随着内容的大小变化 圣杯布局主要是三列自适应布局,主要得实现方式是让center,left,right三个盒子左浮动,然后把left盒子向左移动中间列的宽度也就...
  • flex 实现圣杯布局

    2022-02-11 10:24:41
    flex 实现圣杯布局
  • 本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同。圣杯布局实现1:步骤1:给出 HTML结构:圣杯布局1* {margin: 0;padding: 0;text-Align: center;}#top {background: #666;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,921
精华内容 3,168
关键字:

圣杯布局