文章目录
说明
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现
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>