CSS中的圣杯布局，以及圣杯布局与双飞翼布局的区别

最新推荐文章于 2024-06-17 00:08:19 发布

小小小小小亮

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量3.5k

点赞数

分类专栏： Css 文章标签： css 圣杯布局双飞翼布局

本文链接：https://blog.csdn.net/liwusen/article/details/51351746

版权

Css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

为了解决中间宽度自适应，左右列固定宽度，最早出现的是圣杯布局，双飞翼布局是对圣杯布局的改良，同样这种

布局的优势在于在中间列中的文档可以优先渲染。

1.什么是圣杯布局

其实对于圣杯布局，前面一部分与双飞翼布局完全相同

    <style>

    .column{

       float:left

    .container{

       width:100%

    .column{

      height:300px;

    #center_panel{

      width:100%;

      background-color:red;

    #right_panel{

     width:300px;

     margin-left:-100%;

     background-color:green;

   #left_panel{
      width:300px;

       margin-left:-300px;

       background-color:green;
      }
</style>

<body>

    <div class="container">

        <div class="column" id="center_panel"></div>

        <div class="column" id="right_panel"></div>

       <div class="column" id="left_panel"></div>

     </div>
</body>
</html>

      这样，大致实现了中间宽度自适应，左边和右边的宽度恒定，但是同时也出现了问题，就是中间panel

的部门内容被左边和右边的固定宽度层给遮挡了。

      双飞翼布局和圣杯布局，也就是在如果解决中间层被遮挡的问题上会有不同。

      2.圣杯布局如何解决中间层被遮挡

      圣杯布局通过padding来解决此问题，因为左边的固定宽度为300px;右边的固定列的宽度为300px;

      我们设想可以用padding-left:300px;padding-right:300px;来解决问题，然而我们发现，如果

      简单的设置

      .container{

      padding-left:300px;

      paddding-right:300px;

      出现的效果为：

我们发现左右两列也会同时具有padding值，为了达到不覆盖中间层，并且左右两列没有padding，这里我们对于左右边列，实行相对定位relative;

具体设置如下：

       #right_panel{

              width:300px;

              margin-left:-100%;

              background-color:green;

              position: relative;

              left:-300px;
        }

      #left_panel{

              width:300px;

              margin-left:-300px;

              background-color:green;

              position: relative;

             left:-300px;

如此一来，我们就实现了圣杯布局，并且左右的列也不会覆盖中间列的一些内容，效果如下（PS：relative和浮动可以混用）：

3.双飞翼布局如何解决中间部分被覆盖的方法

双飞翼布局解决中间层覆盖的方法

很简单，就是在center_panel的这一层中增加了一个div，并且设置了这个

div为

        <div class="container">
               <div class="column" id="center_panel">
                      <div id="center_child_panel"></div>
               </div>
               <div class="column" id="right_panel"></div>
               <div class="column" id="left_panel"></div>
        </div>

      并且设置：

                #center_child_panel{
           
                margin-left:300px;
    
                margin-right:300px;
            }
      至此我们实现了双飞燕布局中解决中间层被左右边列覆盖的问题，效果如下：