圣杯布局

我们两清 提交于 2020-03-04 17:58:18

什么是圣杯布局

圣杯布局是一个两侧宽度固定,中间宽度自适应的三栏布局

圣杯布局的特点

  1. 中间部分在DOM结构上优先,以便先行渲染
  2. 允许三列中的任意一列成为最高列(三列高度不一样并且可以以任一列的高度为最高)

怎么实现圣杯布局

  1. 写下HTML代码
 <div class="container">
        <div class="main">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
  1. 使三栏都处于左浮状态,并且使中间栏的宽度成父容器的100%
   .container {
       min-width: 400px;
       height: 200px;
   }
   .main {
       width: 100%;
       height: 100px;
       float: left;
       background-color:red;
   }
   .left {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
   }
   .right {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
     }

在这里插入图片描述

  1. 为主容器设置左右padding的值,使其以后为侧边栏定位空出位置,padding的值为侧边栏的宽
.container {
       /*预留出位置  */
       padding-left: 200px;
       padding-right: 150px;
   }

在这里插入图片描述
4. 为两侧侧边栏加上负margin,用以调整位置。其中左边栏设为margin-left:-100%,而右边栏的margin-left则为负的其自身宽度(利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理)

   .left {
        margin-left: -100%;
   }
   .right {
        margin-left: -150px;
   }

在这里插入图片描述
在这里插入图片描述
5. 为左边栏和右边栏添加position:relative,然后对它们进行定位移动到两侧

 .left {
        position: relative;
        left: -200px;
   }
   .right {
        position: relative;
        right: -150px;
   }

在这里插入图片描述
在这里插入图片描述

完整代码展示

<style>
   body {
       margin: 0;
       padding: 0;
   } 
   .container {
       min-width: 400px;
       height: 200px;
       /*预留出位置  */
       padding-left: 200px;
       padding-right: 150px;
   }
   .main {
       width: 100%;
       height: 100px;
       float: left;
       background-color:red;
   }
   .left {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
   }
   .right {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
        margin-left: -150px;
        position: relative;
        right: -150px;
   }
</style>
<body>
    <div class="container">
        <div class="main">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

双飞翼布局

双飞翼布局参考我的另一篇博客
双飞翼布局

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!