三栏布局实现的几种方式

说明

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

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结构