双飞翼布局以及圣杯布局

Posted 2021-01-15 hongll

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

圣杯布局

　　三栏是独立的，利用外层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;
    }