双飞翼布局以及圣杯布局

三栏布局详解

最新推荐文章于 2025-03-24 10:35:25 发布

weixin_30911451

最新推荐文章于 2025-03-24 10:35:25 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hongll/p/9506406.html

本文详细介绍了两种实现三栏布局的方法：圣杯布局和双飞翼布局。这两种布局均能使页面中间部分宽度自适应，而左右两栏宽度固定。文章通过具体的HTML和CSS代码示例，展示了如何使用外层容器的padding、元素的margin以及定位属性来达到布局效果，并简要提及了flex布局的使用。

双飞翼布局和圣杯布局其实结果是一样的，都是实现三栏布局，中间宽度自适应，两端宽度固定，只是实现的方法不一样

圣杯布局

　　三栏是独立的，利用外层container的padding 以及两端的margin以及定位left，right值实现

 <!-- HTML -->

<div class="container">
    <div class="middle">我是位于中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

/*CSS*/
    /* 先让所有的元素浮动 */
    .left,.right,.middle {
      float: left;
      height: 200px;
    }

    /* 中间的宽度100% */
    .middle {
      width: 100%;
      background-color: #9999994f;
    }

    /* 两边给一个定宽 可以自己定 */
    .left,.right {
      background-color: #e4d8d6bf;
      width: 200px;
    }

    /* 让三栏位于同一行 */
    .left {
      margin-left: -100%;
    }
    
    .right {
      margin-left: -200px;/* right的宽度 */
    }

    /* 给两边留位置 */
    .container {
      padding: 0 200px;
      text-align: center;
    }
    
    /* 让两侧与内容区域分开 */
    .left {
      position: relative;
      left: -200px;
    }
    
    .right {
      position: relative;
      right: -200px;
    }

双飞翼布局

和圣杯类似但是让两侧与内容区域分开使用的是middle内的div 的maring值实现

 <!-- HTML -->

<div class="container">
    <div class="middle">
      <div class="outer">
        我是位于中间
      </div>
    </div>
    <div class="left">左边的</div>
    <div class="right">右边</div>
  </div>

/*css*/
    /* 先让所有的元素浮动 */
    
    .left,.right,.middle {
      float: left;
      height: 200px;
    }
    /* 中间的宽度100% */
    
    .middle {
      width: 100%;
      background-color: #9999994f;
    }
    /* 两边给一个定宽 可以自己定 */
    
    .left,.right {
      background-color: #e4d8d6bf;
      width: 200px;
    }

    /* 让三栏位于同一行 */
    .left {
      margin-left: -100%;
    }
    
    .right {
      margin-left: -200px;/* right的宽度 */
    }

    /* 给两边留位置 */
    
    .container {
      text-align: center;
    }

    /* 让两侧与内容区域分开 */
    .outer {
      margin: 0 200px;
    }

末尾讲一下flex 其实我觉得这个还是挺好用的

dispaly:flex;

　<div class="container">
    <div class="left">左边的</div>
    <div class="middle">我是位于中间</div>
    <div class="right">右边</div>
  </div>

 .container {
      display: flex;
    }
    
    .right,
    .left {
      width: 200px;
      background-color: blue;
      flex: 0 1 200px;
    }
    
    .middle {
      flex: 1;
    }