首页 > 其他分享> > 三栏布局实现的几种方式

三栏布局实现的几种方式

2020-11-27 23:01:22 作者：互联网

文章目录

说明

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现

left 为300px，right 为200px

1、利用浮动

原理：浮动元素脱离文档流

html结构

<div class="wrapper">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>

css 样式

.left {
  float: left;
  width: 300px;
  height: 400px;
  background-color: limegreen;
}

.right {
  float: right;
  width: 200px;
  height: 400px;
  background-color: yellowgreen;
}

.center {
  height: 400px;
  margin: 0 200px 0 300px;
  background-color: tomato;
}

2、利用绝对定位

原理：绝对定位元素脱离文档流
html结构同上

css 样式

.wrapper {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  top: 0;

  width: 300px;
  height: 500px;

  background-color: lightgreen;
}

.right {
  position: absolute;
  right: 0;
  top: 0;

  width: 200px;
  height: 500px;

  background-color: lightskyblue;
}

.center {
  height: 500px;
  margin: 0 200px 0 300px;
  background-color: tomato;
}

3、利用 flex 布局

原理：利用了容器项目 order 属性的特点

html结构

<div class="wrapper">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

css样式

.wrapper {
  display: flex;
  height: 500px;
}

.center {
  order: 1;
  flex-grow: 1;
  background-color: tomato;
}

.left {
  width: 300px;
  height: 500px;
  background-color: lightgreen;
}

.right {
  order: 2;
  width: 200px;
  height: 500px;
  background-color: lightskyblue;
}

圣杯布局

圣杯布局其实也是三栏布局，只不过是中间内容优先显示而已

实现思路

在 wrapper 中的三列 center、left 和 rigth 分别设置左浮动和相对定位
left 和 right 的宽分别为 300px 和 200px，center 宽度为 100%
因为浮动的关系 center 会占满整个 wrapper，left 和 right 会被挤到它下面
对 left 设置 margin-left：100%，让其回到上一行的左侧
此时会将 center 的左边一部分遮住，所以需要给 wrapper 为其设置 padding: 0 200px 0 300px，给left 空出位置
这时会发现 left 还没有在左侧，此时需要通过之前设置好的相对定位 left：-300px 使其回到最左边
同样的道理，对 right 也设置 margin-left：-200px，将 right 也拉回第一行
这时再对其设置 right：-200px;

html 结构

<div class="wrapper">
	<div class="center"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

css 样式

方式一：利用浮动和定位实现

.wrapper {
  height: 500px;
  padding: 0 200px 0 300px;
}

.center, .left, .right {
  position: relative;
  float: left;
}

.center {
  width: 100%;
  height: 500px;
  background-color: tomato;
}

.left {
  left: -300px;

  width: 300px;
  height: 500px;

  margin-left: -100%;
  background-color: lightgreen;
}

.right {
  left: 200px;
  width: 200px;
  height: 500px;
  margin-left: -200px;
  background-color: lightskyblue;
}

方式二：利用 flex 实现

.wrapper {
  display: flex;
  height: 500px;
}

.center {
  order: 1;
  flex-grow: 1;
  background-color: tomato;
}

.left {
  width: 300px;
  height: 500px;
  background-color: lightgreen;
}

.right {
  order: 2;
  width: 200px;
  height: 500px;
  background-color: lightskyblue;
}

双飞翼布局

双飞翼布局其实和圣杯布局类似，都是为了实现三栏布局，且中间内容部分优先展示

不同点就是圣杯布局利用的是 wrapper 的 padding 来保留左右位置的，而双飞翼布局利用的是给中间部分（center）的 margin 来实现的，因为它是在 center 的外面再次嵌套了一层 div（center-wrapper）

具体实现
先来看一下 html 结构

<div class="wrapper">
  <div class="center-wrapper">
    <div class="center">1111111</div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</div>

在wrapper 的三列 center-wrapper、left、right分别设置左浮动
left 和 right 的宽度分别设置为 300px、200px ，center-wrapper 的宽度设置为 100%
对 left 设置 margin-left：100%，使其回到上一行的最左边
此时 center 中的部分内容会被其遮住，所有对 center-wrapper 设置 margin: 0 200px 0 300px，使其不被遮住
对 right 使用 margin-left：-200px，使其回到上一行的最右边，此时就大功告成

完整代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 
      第一种：利用浮动
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }


    .left {
      float: left;
      width: 300px;
      height: 400px;
      background-color: limegreen;
    }

    .right {
      float: right;
      width: 200px;
      height: 400px;
      background-color: yellowgreen;
    }

    .center {
      height: 400px;
      margin: 0 200px 0 300px;
      background-color: tomato;
    } */

    /*
      第二种：利用绝对定位
    */

    /* .wrapper {
      position: relative;
    }

    .left {
      position: absolute;
      left: 0;
      top: 0;

      width: 300px;
      height: 500px;

      background-color: lightgreen;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;

      width: 200px;
      height: 500px;

      background-color: lightskyblue;
    }

    .center {
      height: 500px;
      margin: 0 200px 0 300px;
      background-color: tomato;
    } */


    /*
      第三种：利用 flex 布局
    */
    /* .wrapper {
      display: flex;
      height: 500px;
    }

    .left {
      width: 300px;
      background-color: lightgreen;
    }

    .center {
      flex-grow: 1;
      background-color: tomato;
    }

    .right {
      width: 200px;
      background-color: lightskyblue;
    } */

    /* 第四种，圣杯布局，优先显示中间内容 */

    /* .wrapper {
      height: 500px;
      padding: 0 200px 0 300px;
    }

    .center, .left, .right {
      position: relative;
      float: left;
    }

    .center {
      width: 100%;
      height: 500px;
      background-color: tomato;
    }

    .left {
      left: -300px;

      width: 300px;
      height: 500px;

      margin-left: -100%;
      background-color: lightgreen;
    }

    .right {
      left: 200px;

      width: 200px;
      height: 500px;
      margin-left: -200px;
      background-color: lightskyblue;
    } */

    /* flex 实现 */
    /* .wrapper {
      display: flex;
      height: 500px;
    }

    .center {
      order: 1;
      flex-grow: 1;
      background-color: tomato;
    }

    .left {
      width: 300px;
      height: 500px;
      background-color: lightgreen;
    }

    .right {
      order: 2;
      width: 200px;
      height: 500px;
      background-color: lightskyblue;
    } */

    /*
      第五种：双飞翼布局
    */
    .wrapper {
      height: 500px;
    }

    .center-wrapper,
    .left,
    .right {
      float: left;
      height: 500px;
    }

    .center-wrapper {
      width: 100%;
      background-color: tomato;
    }

    .left {
      width: 300px;

      margin-left: -100%;
      background-color: lightgreen;
    }

    .right {
      width: 200px;
      margin-left: -200px;
      background-color: lightskyblue;
    }

    .center {
      margin-left: 300px;
      margin-right: 200px;
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="wrapper clearfix">
    <!-- 第一种和第二种 -->
    <!-- <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div> -->

    <!-- 第三种 -->
    <!-- <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div> -->

    <!-- 第四种 -->
    <!-- <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div> -->

    <!-- 第五种 -->
    <div class="wrapper">
      <div class="center-wrapper">
        <div class="center">1111111</div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</body>

</html>

标签：right,三栏,color,布局,200px,几种,background,height,left
来源： https://blog.csdn.net/qq_44162474/article/details/110248606