圣杯布局与双飞翼布局

_月半小夜曲

已于 2023-07-01 19:58:54 修改

阅读量224

点赞数

分类专栏： CSS 文章标签： css html css3 flex 定位

于 2020-08-23 15:02:45 首次发布

本文链接：https://blog.csdn.net/weixin_42205101/article/details/108183223

版权

本文介绍了圣杯布局和双飞翼布局两种实现三列布局的方法，两者都确保了两侧定宽，中间自适应的效果。圣杯布局利用padding、float、负margin和相对定位，双飞翼布局则采用float和绝对定位配合padding来处理。此外，还提到了使用flex布局实现这一效果的新方法。

摘要由CSDN通过智能技术生成

圣杯布局和双飞翼布局实现的页面效果都是一样的，那就是两侧定宽，中间自适应的三列布局，且优先渲染中间一列，布局上都是中、左、右的顺序，且都是左浮动，区别就是在处理左右两栏遮挡中栏内容的处理方式上不同，圣杯布局是通过中、左、右的外层盒子设置左右padding留出左右栏的位置，而双飞翼布局是通过给中栏外面包裹一层盒子，然后给外层盒子设置左右padding或者给中栏设置左右margin留出左右栏的位置

1、圣杯布局

html结构:

<body>
    <div class="header">我是头部内容</div>
    <div class="container">
        <div class="middle">我是中间内容</div>
        <div class="left">我是左侧内容</div>
        <div class="right">我是右侧内容</div>
    </div>  
    <div class="footer">我是底部内容</div>
</body>

1.1 padding+float+负margin+相对定位

 <style>
        *{
                                 /*清除默认外边距和内边距*/
            margin: 0;
            padding: 0;
        }
        .header,.footer{
                  /* 底部和头部，宽度设置100%，高度为固定高度 */
            width: 100%;
            height: 50px;
            text-align:center;
            line-height: 50px; 
        }
        .header{
   
            background-color: orange;
        }
        .footer{
   
            background-color:black;
            color: #FFF;
        }
         /* 1、左中右三列是包在一个大容器container内*/
        .container{
             
            height: 600px;
          /* 6、此时左右其实是遮盖了中间部分的两侧，给container设置左右padding挤出位置 */ 
            padding: 0 200px;   
        }
        .container div{
   
         /* 2、三列的顺序为中、左、右，且全部左浮动*/
            float: left;
            height: 600px;
            text-align: center;
        }
        .container .middle{
                 
            background-color: red;
             /* 3、设置中间部分宽度为100%，那么左和右就被挤到下一行了*/ 
            width: 100%;
        }
        .container .left{
     
            background-color: green;
            width