CSS布局技巧大全
单列布局
水平居中
- 父元素text-align:center;子元素：inline-block;
- 优点：兼容性好；
- 不足：需要同时设置子元素和父元素
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
text-align: center;
}
.child {
display: inline-block;
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 子元素margin:0 auto;
- 优点：兼容性好
- 缺点：需要指定宽度
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
}
.child {
width: 300px;
height: 100px;
background: blue;
margin:0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 子元素
- 优点:只需要对自身进行设置
- 不足:IE6,7需要调整结构
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
}
.child {
width: 300px;
height: 100px;
background: blue;
margin:0 auto;
display:table;margin:0 auto;s
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半
- 优点：兼容性好
- 缺点：需要知道子元素的宽度
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);
- 优点：兼容性差
- 缺点：不需要知道子元素的宽度
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 弹性盒子：父元素：display:flex;justify-content:center;
- 优点：简单
- 缺点：兼容性差
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
justify-content: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
垂直居中
- vertical-align:center;
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display:table-cell;
vertical-align:middle;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
vertical-align:middle;
line-height:450px;
}
.child {
width: 300px;
height: 100px;
background: blue;
display:inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->
- 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 50%;
left:0;
transform: translate(0,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
-
父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;
-
父元素：display:flex;align-items:center;
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
align-items: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
水平垂直居中
- 父元素：display:table-cell;vertical-align:middle;text-align:center;
子元素；display:inline-block;
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.child {
width: 300px;
height: 100px;
background: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 父元素：position:relative;
子元素：position:absolute🔝50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者transform:translate(-50%,-50%);
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
left: 0;
right: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
多列布局
左侧定宽，右侧自适应
- .left{float:left;width:100px;}
.right
<!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>左侧固定右侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.left {
height: 400px;
width:300px;
background:red;
float: left;
}
.right {
height: 400px;
margin-left:300px;
background:blue;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</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>左侧固定右侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.left{
width:300px;
height:400px;
float:left;
background:red;
}
.right-fix{
width:100%;
margin-left:-300px;
float:right;
}
.right
{
margin-left:300px;
height:400px;
background:blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right-fix">
<div class="right">
right
</div>
</div>
</div>
</body>
</html>
- .left{width:宽度值;float:left;} .right
<!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>左侧固定右侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.left{
width:300px;
height:400px;
float:left;
background:red;
}
.right
{
height:400px;
background:blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
- table实现
<!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>左侧固定右侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
display:table;
table-layout:fixed;
width:100%;
}
.left{
width:300px;
height:400px;
background:red;
display: table-cell;
}
.right
{
height:400px;
background:blue;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
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>左侧固定右侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
display:flex;
width:100%;
}
.left{
width:300px;
height:400px;
background:red;
}
.right
{
height:400px;
background:blue;
flex:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
右侧定宽左侧自适应
- float+margin实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.left{
width:100%;
height:400px;
background:red;
float:left;
margin-right: -300px;
}
.right
{
height:400px;
background:blue;
width: 300px;
float: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
- table实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: table;
table-layout: fixed;
}
.left{
width:100%;
height:400px;
background:red;
display: table-cell;
}
.right
{
height:400px;
background:blue;
width: 300px;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: flex;
}
.left{
flex:1;
background:red;
display: table-cell;
}
.right
{
height:400px;
background:blue;
width: 300px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
左边两列定宽，右侧自适应
- float+margin实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
}
.left,.center{
background:red;
float: left;
width: 300px;
height: 400px;
}
.center {
background:yellow;
}
.right
{
height:400px;
background:blue;
margin-left: 600px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
- float+overflow实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
}
.left,.center{
background:red;
float: left;
width: 300px;
height: 400px;
}
.center {
background:yellow;
}
.right
{
height:400px;
background:blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
- table实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: table;
table-layout: fixed;
}
.left,.center{
background:red;
display: table-cell;
width: 300px;
height: 400px;
}
.center {
background:yellow;
}
.right
{
height:400px;
background:blue;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: flex;
}
.left,.center{
background:red;
width: 300px;
height: 400px;
}
.center {
background:yellow;
}
.right
{
height:400px;
background:blue;
flex:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
左右定宽，中间自适应
- float+margin实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
}
.left,.right{
background:red;
width: 300px;
height: 400px;
float: left;
}
.right {
background:yellow;
float: right;
}
.center
{
height:400px;
background:blue;
width:100%;
float: left;
margin-right:-600px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
- table实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: table;
table-layout: fixed;
}
.left,.right{
background:red;
width: 300px;
height: 400px;
display: table-cell;
}
.right {
background:yellow;
}
.center
{
height:400px;
background:blue;
width:100%;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: flex;
}
.left,.right{
background:red;
width: 300px;
height: 400px;
}
.right {
background:yellow;
}
.center
{
height:400px;
background:blue;
width:100%;
flex:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
一列不定宽，一列自适应
- table实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: table;
table-layout: auto; /*原文写的fixed，这是不对的*/
}
.left{
background:red;
height: 400px;
display: table-cell;
width: 0.1%;
}
.right {
background:yellow;
height: 400px;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
leftffffffffffffff
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
- BFC盒子
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
}
.left{
background:red;
height: 400px;
float: left;
}
.right {
background:yellow;
height: 400px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
leftffffffffffffff
</div>
<div class="right">
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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: flex;
}
.left{
background:red;
height: 400px;
}
.right {
background:yellow;
height: 400px;
flex:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
leftffffffffffffff
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
多列等分布局
- float+padding+margin
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: flex;
margin-left:-10px;
}
.col {
height: 400px;
float: left;
padding-left: 10px;
box-sizing: border-box;
width:25%;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="col" style="background:yellow;">
col1
</div>
<div class="col" style="background:red;">
col2
</div>
<div class="col" style="background:green;">
col3
</div>
<div class="col" style="background:blue;">
col4
</div>
</div>
</body>
</html>
- table实现
<!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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: table;
table-layout: fixed;
}
.col {
height: 400px;
display: table-cell;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="col" style="background:yellow;">
col1
</div>
<div class="col" style="background:red;">
col2
</div>
<div class="col" style="background:green;">
col3
</div>
<div class="col" style="background:blue;">
col4
</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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent {
width: 100%;
display: flex;
}
.col {
height: 400px;
flex:1;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="col" style="background:yellow;">
col1
</div>
<div class="col" style="background:red;">
col2
</div>
<div class="col" style="background:green;">
col3
</div>
<div class="col" style="background:blue;">
col4
</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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
html,body,parent{
height:100%;
overflow:hidden;
}
.top{
position:absolute;
top:0;
left:0;
right:0;
height:100px;
background:red;
}
.left{
position:absolute;
top:100px;
left:0;
bottom:50px;
width:200px;
background:blue;
}
.right{
position:absolute;
overflow:auto;
left:200px;
right:0;
top:100px;
bottom:50px;
background:yellow;
}
.bottom{
position:absolute;
left:0;
right:0;
bottom:0;
height:50px;
background:black;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="bottom">bottom</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>右侧固定左侧自适应</title>
<style>
* {
margin:0;
padding:0;
}
.parent{
display:flex;
flex-direction:column;
}
.top{
height:100px;
}
.bottom{
height:50px;
}
.middle{
flex:1;
display:flex;
}
.left{
width:200px;
}
.right{
flex:1;
overflow:auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
小结一下
跟着原作者一步一步做了这些布局，发现布局的方法就是那几种，只要真正领会他们到底是怎么回事，实现各种复杂布局并非难事。最后，在此向愿创者表示感谢，您的总结让我了解到了一些个以前不知道的东西。
文章来源： http://www.cnblogs.com/floor/，转载请注明，谢谢！
