三栏布局实现-CSDN博客

本文链接：https://blog.csdn.net/qq_62939177/article/details/138175616

要求

左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。实现三栏布局的方法通常是圣杯布局和双飞翼布局。

实现

双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
</head>

<body>
  <div id="app">
    <div class="header">头部</div>
    <div class="content">
      <div class="wrap">
        <div class="middle">中间</div>
      </div>
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>
    <div class="footer">底部</div>
  </div>
  <style>
    #app {
      min-width: 600px;
    }

    .header,
    .footer {
      height: 100px;
      width: 100%;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      letter-spacing: 2px;
      font-weight: 500;
      background-color: pink;
    }

    .content {
      /* 设置宽高清除浮动 */
      /* height: 500px; */
      /* padding:  0 1px; */
      /* 清除浮动方法2 */
      overflow: hidden;

    }

    .wrap,
    .left,
    .right {
      float: left;
      height: 500px;
      line-height: 500px;
      text-align: center;
    }

    .left,
    .right {
      width: 200px;
    }

    .left {
      margin-left: -100%;
      background-color: #0f0;
    }

    .right {
      margin-left: -200px;
      background-color: #f00;
    }

    .wrap {
      width: 100%;
      background-color: #00f;
    }

    .middle {
      margin: 0 200px;
      text-align: center;
    }
  </style>
</body>

</html>

圣杯布局

圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
</head>

<body>
  <div id="app">
    <div class="header">头部</div>
    <div class="content">
        <div class="middle">中间</div>

      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>
    <div class="footer">底部</div>
  </div>
</body>
<style>
  #app {
    min-width: 600px;
  }

  .header,
  .footer {
    height: 100px;
    width: 100%;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: 500;
    background-color: pink;
  }

  .content {
    /* 设置宽高清除浮动 */
    /* height: 500px; */
    /* padding:  0 1px; */
    /* 清除浮动方法2 */
    overflow: hidden;

  }
/* 1 */
  .middle,
  .left,
  .right {
    float: left;
    height: 500px;
    line-height: 500px;
    text-align: center;
  }
/* 1 */
  .left,
  .right {
    width: 200px;
  }
/* 1 */
  .left {
    margin-left: -100%;
    background-color: #0f0;
  }
/* 1 */
  .right {
    margin-left: -200px;
    background-color: #f00;
  }
/* 1 */
  .middle {
    width: 100%;
    background-color: #00f;
  }
</style>

</html>

其他布局

浮动布局

    #app {
      min-width: 600px;
    }
    .header,.footer {
      height: 100px;
      width: 100%;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      letter-spacing: 2px;
      font-weight: 500;
      background-color: pink;
    }
    .content {
      height: 500px;
    }
    .middle,.left,.right {
      height: 500px;
      line-height: 500px;
      text-align: center;
    }
    .left,.right {
      width: 200px;
    }
    .left {
      float: left;
      background-color: #0f0;
    }
    .right {
      float: right;
      margin-left: -200px;
      background-color: #f00;
    }
    .middle {
      overflow: hidden； // BFC的盒子不会与浮动元素发生重叠
      text-align: left;
      background-color: #00f;
    }
 <div id="app">
    <div class="header">头部</div>
    <div class="content">
      <div class="left">左边</div>
      <div class="right">右边</div>
      <!-- 中间的放在最后边 -->
      <div class="middle">中间</div>
    </div>
    <div class="footer">底部</div>
  </div>

定位布局

 #app {
      min-width: 600px;
    }
    .header,.footer {
      height: 100px;
      width: 100%;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      letter-spacing: 2px;
      font-weight: 500;
      background-color: pink;
    }
    .content {
      height: 500px;
      position: relative;
    }
    .middle,.left,.right {
      height: 500px;
      line-height: 500px;
      text-align: center;
      position: absolute;
    }
    .left,.right {
      width: 200px;
    }
    .left {
      background-color: #0f0;
      left: 0;
    }
    .right {
      right: 0;
      background-color: #f00;
    }
    .middle {
      width: 100%;
      text-align: left;
      background-color: #00f;
      margin: 0 200px;
    }
 <div id="app">
    <div class="header">头部</div>
    <div class="content">
      <div class="left">左边</div>
      <div class="middle">中间</div>
      <div class="right">右边</div>
      <!-- 中间的放在最后边 -->
    </div>
    <div class="footer">底部</div>
  </div>

flex布局

    #app {
      min-width: 600px;
    }
    .header,.footer {
      height: 100px;
      width: 100%;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      letter-spacing: 2px;
      font-weight: 500;
      background-color: pink;
    }
    .content {
      height: 500px;
      display: flex;
    }
    .middle,.left,.right {
      height: 500px;
      line-height: 500px;
      text-align: center;
    }
    .left,.right {
      width: 200px;
    }
    .left {
      background-color: #0f0;
    }
    .right {
      background-color: #f00;
    }
    .middle {
      flex: 1;
      text-align: left;
      background-color: #00f;
    }
 <div id="app">
    <div class="header">头部</div>
    <div class="content">
      <div class="left">左边</div>
      <div class="middle">中间</div>
      <div class="right">右边</div>
      <!-- 中间的放在最后边 -->
    </div>
    <div class="footer">底部</div>
  </div>

grid布局

#app {
min-width: 600px;
}
.header,.footer {
height: 100px;
width: 100%;
line-height: 100px;
text-align: center;
font-size: 30px;
letter-spacing: 2px;
font-weight: 500;
background-color: pink;
}
.content {
height: 500px;
display: grid;
/* 设置三列 /
grid-template-columns: 200px auto 200px;
/ 设置高度 /
grid-template-rows: auto;
}
.middle,.left,.right {
/ height: 500px;
line-height: 500px; /
text-align: center;
}
/ .left,.right {
width: 200px;
} */
.left {
background-color: #0f0;
}
.right {
background-color: #f00;
}
.middle {
text-align: left;
background-color: #00f;
}
<div id="app">
<div class="header">头部</div>
<div class="content">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>

</div>
<div class="footer">底部</div>
</div>