三列布局（圣杯布局和双飞翼布局）

最新推荐文章于 2024-07-18 20:18:47 发布

考拉king

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量147

点赞数

文章标签： css

本文链接：https://blog.csdn.net/koala40/article/details/104793578

版权

三列布局

要求

1.两边固定当中自适应
2.当中列要完整显示
3.当中列要优先加载

圣杯局部`

<head>
 <meta charset="UTF-8">
   <title></title>

<style type="text/css">
         *{
            margin: 0;
            padding: 0;
         }
         body{
            min-width: 600px;
         }
         #content{
            overflow: hidden;/*伪等高布局使用*/
            padding: 0 200px;
         }
         #content .middl,#content .left,#content .right{
            padding-bottom: 10000px;
            margin-bottom: -10000px;
         }
  
         #header,#footer{
            height: 20px;
            text-align: center;
            border: 1px solid  deeppink;
            background: gray;
         }
                #content .middle{
            float: left;
            width: 100%;
            background: pink;
            
         }
         #content .left{
            position: relative;
            left: -200px;
            margin-left: -100%;
            float: left;
            width: 200px;
            background: yellow;
         }
         #content .right{
            position: relative;
            right: -200px;
            margin-left: -200px;
            float: left;
            width: 200px;
            background: yellow;
         }
         
         
         
         .clearfix{
            *zoom: 1;
         }
         .clearfix:after{
            content: "";
            display: block;
            clear: both;
         }
      </style>
   </head>
   <body>
      <div id="header">header</div>
      <div id="content" class="clearfix">
         <div class="middle">
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
            <h4>middle</h4>
         </div>
         <div class="left">left</div>
         <div class="right">right</div>
      </div>
      <div id="footer">footer</div>
   </body>

浮动: 搭建布局框架
margin赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置（使两列位置调整到两头）

双飞翼布局

<head>
   <meta charset="UTF-8">
   <title></title>
   tyle type="text/css">
      *{
         margin: 0;
         padding: 0;
      }
      body{
         min-width: 600px;
      }
      
      
     
      #header,#footer{
         border: 1px solid;
         background: gray;
         text-align: center;
      }
      
      /*三列的伪等高布局*/
      #content .middle,#content .left,#content .right{
         padding-bottom:10000px ;
         margin-bottom: -10000px;
         height: 50px;
         line-height: 50px;
         float: left;
      }
      
      /*双飞翼布局*/
      #content{
         overflow: hidden;
      }
      #content .middle{
         width: 100%;
         background: deeppink;
      }
      #content .middle .m_inner{
         padding: 0 200px;
      }
      #content .left,#content .right{
         background: pink;
         width: 200px;
         text-align: center;
      }
      #content .left{
         margin-left: -100%;
      }
      #content .right{
         margin-left: -200px;
      }
      
   </style>
</head>
<body>
   <div id="header">
      <h4>header</h4>
   </div>
   <div id="content">
      <div class="middle">
         <div class="m_inner">
            middle
         </div>
      </div>
      <div class="left">left</div>
      <div class="right">right</div>
   </div>
   <div id="footer">
      <h4>footer</h4>
   </div>
</body>

在圣杯布局的基础上减少相对定位的使用
在middle中定义一个块元素将其padding设置为左右两列的宽度
**

***

两组实现的对比:

1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
3.两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整。

考拉king

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列布局（圣杯布局和双飞翼布局）

三列布局要求1.两边固定当中自适应2.当中列要完整显示3.当中列要优先加载圣杯局部`<head> <meta charset="UTF-8"> <title></title><style type="text/css"> *{ margin: 0; ...
复制链接

扫一扫