实现三栏布局5种方式
2019-12-09 本文已影响0人
蛙哇
前言
前端开发中，布局是前端基础的内容，而其中三栏布局在实际开发和面试中最常见，三栏布局是指中间自适应两边固定宽，而我们经常使用的淘宝首页（pc端）就是典型的三栏布局实现的。下面总结了五种三栏布局方式，希望自己学习总结的同时对大家有所帮组。
1、左右浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout</title>
<style>
.left {
height: 150px;
width: 300px;
float: left;
background: red;
}
.center {
height: 150px;
background: blue;
}
.right {
width: 300px;
height: 150px;
float: right;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
效果图：
image
这种布局方式，必须先写浮动部分，最后再写中间部分，否则右浮动块会掉到下一行。
-
浮动布局优点：就是比较简单，兼容性也比较好。 -
浮动布局缺点：具是有局限性的，浮动元素是脱离文档流，会带来很多问题，比如父容器高度塌陷等。
2、绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout</title>
<style>
.left {
position: absolute;
height: 150px;
width: 300px;
left: 0;
background: red;
}
.center {
position: absolute;
height: 150px;
left: 300px;
right: 300px;
background: blue;
}
.right {
position: absolute;
right: 0;
width: 300px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
-
绝对定位布局优点:快捷以及设置简单，而且也不容易出问题。 -
绝对定位布局缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。
3、Flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout</title>
<style>
.container {
display: flex;
}
.left {
order: 1;
width: 300px;
background: red;
}
.center {
flex: 1;
order: 2;
height: 150px;
background: blue;
}
.right {
width: 300px;
order: 3;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
需要注意要将中间块放在前面，通过order来控制位置，实际高度会根据内容自适应，三栏高度统一。
-
Flex布局的优点：在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。 -
Flex布局的缺点:IE10才开始支持
4、Grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout</title>
<style>
.container {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px;
width: 100%;
}
.left {
background: red;
}
.center {
background: blue;
}
.right {
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
-
Grid布局优点:创建网格布局最强大和最简单的工具。实际高度会根据内容自适应，三栏高度统一。 -
Grid布局缺点：唯一的缺点就是兼容性不太好。
5、表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout</title>
<style>
.container {
display: table;
height: 150px;
width: 100%;
}
.left {
display: table-cell;
width: 300px;
background: red;
}
.center {
display: table-cell;
background: blue;
}
.right {
width: 300px;
display: table-cell;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
表格布局优点：兼容性很好，在Flex布局不兼容的时候（一般情况下很少不兼容），可以尝试表格布局。当内容溢出时会自动撑开父元素。
表格布局缺点:
- 无法设置栏边距
- 对
seo不友好 - 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。
总结
现在相信大家一般都在使用Flex布局，三栏布局当然页推荐使用Flex布局，如果有不兼容Flex那就自行斟酌选择自己觉得合适的就ok。
