一、要求
实现左右固定宽度，中间自适应的布局
image.png
二、实现
1. float布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
.left {
float: left;
width: 400px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 400px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 400px;
margin-right: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>
2.BFC规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
.left {
float: left;
width: 400px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 400px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
</html>
3.圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
.left {
float: left;
width: 400px;
height: 200px;
margin-left: -100%;
position: relative;
left: -400px;
background-color: red;
}
.right {
float: left;
width: 400px;
height: 200px;
margin-left: -400px;
position: relative;
right: -400px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
.container {
padding-left: 400px;
padding-right: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 400px;
margin-right: 400px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
width: 400px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 400px;
height: 200px;
margin-left: -400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
5.flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.main {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
background-color: yellow;
flex: 0 1 400px;
}
.right {
height: 200px;
background-color: green;
flex: 0 1 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
6. 绝对定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
.main {
position: absolute;
left: 400px;
right: 400px;
height: 200px;
background-color: yellow;
}
.left {
position: absolute;
left: 0px;
width: 400px;
height: 200px;
background-color: red;
}
.right {
position: absolute;
right: 0px;
width: 400px;
background-color: green;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
