1.使用flex布局
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
body{
display:flex;
}
.center{
flex-grow:1;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
2.使用float布局（center必须位于left和right之后）
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
3.使用position进行布局
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
*{
margin:0;
}
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
padding:0 100px;
}
.left{
position: absolute;
top:0;
left:0;
}
.right{
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
4.使用calc加float进行布局
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
.left, .right, .center{
float:left;
}
.center{
width:calc(100% - 200px);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
5.双飞翼布局（可以使center区域的内容优先加载）
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
.container{
width:100%;
float:left;
}
.center{
margin:0 100px;
}
.left{
float:left;
margin-left:-100%;
}
.right{
float:left;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
6.圣杯布局(可以使center区域的内容优先加载)
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
.container{
padding:0 100px;
}
.center{
width:100%;
float:left;
}
.left{
float:left;
margin-left:-100%;
position: relative;
right:100px;
}
.right{
float:left;
margin-right:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
7.使用grid布局
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
width:100px;
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
body{
display: grid;
grid-template-columns:100px auto 100px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
在此基础上如果想让center区域的内容优先加载，也可以使用grid布局：
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
<style type="text/css">
.left, .right{
height:200px;
background-color: lightblue;
}
.center{
height:200px;
background-color: orange;
}
body{
display: grid;
grid-template-columns:100px auto 100px;
grid-template-areas:"left center right";
}
.content{
grid-area:center;
}
.left{
grid-area:left;
}
.right{
grid-area:right;
}
</style>
</head>
<body>
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
