实现三栏布局5种方式
前言
前端开发中，布局是前端基础的内容，而其中三栏布局在实际开发和面试中最多见，三栏布局是指中间自适应两边固定宽，而咱们常常使用的淘宝首页（pc端）就是典型的三栏布局实现的。下面总结了五种三栏布局方式，但愿本身学习总结的同时对你们有所帮组。html
一、左右浮动布局
<!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>
效果图：前端
这种布局方式，必须先写浮动部分，最后再写中间部分，不然右浮动块会掉到下一行。面试
-
浮动布局优势：就是比较简单，兼容性也比较好。 -
浮动布局缺点：具是有局限性的，浮动元素是脱离文档流，会带来不少问题，好比父容器高度塌陷等。
二、绝对定位布局
<!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>
-
绝对定位布局优势:快捷以及设置简单，并且也不容易出问题。 -
绝对定位布局缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就致使了这种方法的有效性和可以使用性是比较差的。
三、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才开始支持
四、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布局缺点：惟一的缺点就是兼容性不太好。
五、表格布局
<!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。flex