圣杯布局和双飞翼布局

54. 圣杯布局和双飞翼布局

一、圣杯布局实现

1. 使用浮动和负边距

<style>
    .container {
      padding-left: 200px;
      padding-right: 200px;
    }
    .left, .right {
      width: 200px;
      height: 200px;
      background: tomato;
      float: left;
      position: relative;
    }
    .left {
      margin-left: -100%;
      right: 200px;
    }
    .right {
      margin-left: -200px;
      left: 200px;
    }
    .center {
      float: left;
      width: 100%;
      height: 200px;
      background: skyblue;
    }
</style>
<div class="container">
  <div class="center">中央列</div>
  <div class="left">左侧列</div>
  <div class="right">右侧列</div>
</div>  

这种实现方式使用了浮动和负边距。中央列占据整个父容器的宽度，左右两侧列使用了负的margin-left将它们移到正确的位置。同时，为了防止左右两侧列遮挡中央列的内容，需要给父容器添加左右两侧的padding。

2. 使用Flex布局

<style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .left, .right {
      width: 200px;
      height: 200px;
      background: tomato;
    }
    .center {
      flex: 1;
      height: 200px;
      background: skyblue;
    }
</style>
<div class="container">
  <div class="left">左侧列</div>
  <div class="center">中央列</div>
  <div class="right">右侧列</div>
</div>  

这种实现方式使用了flex布局。通过给父容器设置display: flex，将中央列设置为flex: 1，使其自动占据剩余的宽度。

3. 使用定位

<style>
    .container {
      position: relative;
    }

    .center {
      height: 200px;
      background: skyblue;
      margin-left: 200px;
      margin-right: 200px;
    }
    .left, .right {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      background: tomato;
    }
    .left {
      left: 0;
    }
    .right {
      right: 0;
    }
</style>
<div class="container">
  <div class="center">中央列</div>
  <div class="left">左侧列</div>
  <div class="right">右侧列</div>
</div>  

这种实现方式使用了position。中央列通过设置左右两侧的margin来使其占据正确的位置，其中，左侧列的left值为0，而右侧列的right值为0，这样可以将它们固定在页面的左右两侧。

二、双飞翼布局实现

<style>
/* 双飞翼 */
  .container {
    width: 100%;
    float: left;
  }
  .center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    background: skyblue;
  }
  .left {
    width: 200px;
    height: 200px;
    background: tomato;
    float: left;
    margin-left: -100%;
  }
  .right {
    width: 200px;
    height: 200px;
    background: tomato;
    float: left;
    margin-left: -200px;
  }
</style>
<!-- 双飞翼 -->
<div class="container">
  <div class="center">中央列</div>
</div>
<div class="left">左侧列</div>
<div class="right">右侧列</div> 

这种实现方式使用了浮动和负边距。中央列占据整个父容器的宽度，并设置了左右两侧的margin使其不会被遮挡。左右两侧列使用了负的margin-left将它们移到正确的位置，而为了防止左右两侧列遮挡中央列的内容，需要给中央列设置左右两侧的margin。

需要注意的是，由于左右两侧列是浮动的，所以它们的高度无法撑开父容器，需要在父容器上添加overflow:hidden来防止内容溢出。此外，由于左右两侧列的宽度是固定的，如果需要适应不同的屏幕尺寸，可以使用媒体查询来改变它们的宽度。