1.中间固定宽度，两侧自适应
1.1 flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,div{
height: 100%;
}
.left {
background-color: #ccc;
flex:1;
}
.middle {
background-color: #75cc23;
flex:0 0 400px;
}
.right {
background-color: #cc3b38;
flex:1;
}
.con{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="con">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
</body>
//也可以用这个样式
html,body,div{
height: 100%;
}
.left {
background-color: #ccc;
flex-grow:1;
}
.middle {
background-color: #75cc23;
400px;
}
.right {
background-color: #cc3b38;
flex-grow:1;
}
.con{
display: flex;
justify-content: center;
}
1.2 calc+float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,div{
height: 100%;
}
.left,.right {
background-color: #ccc;
float: left;
calc((100% - 400px) / 2)
}
.middle {
background-color: #75cc23;
400px;
float:left;
}
.right {
background-color: #cc3b38;
}
</style>
</head>
<body>
<div class="con">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
</body>
</html>
2.两边固定 中间自适应
2.1浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<style type="text/css">
.con div{
min-height: 200px;
}
.con .left{
float: left;
300px;
background: #72f5ff;
}
.con .right{
float: right;
300px;
background: #7aff73;
}
.con .middle{
background: #ff2d21;
}
</style>
</head>
<body>
<div class="con">
<div class="left"></div>
<div class="right"></div>
<div class="middle">
</div>
</div>
</body>
</html>
2.2使用绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位布局</title>
<style type="text/css">
.con div{
position: absolute;
min-height: 200px;
}
.con .left{
left: 0;
300px;
background: red;
}
.con .right{
right: 0;
300px;
background: blue;
}
.con .middle{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="con">
<div class="left"></div>
<div class="middle">
</div>
<div class="right"></div>
</div>
</body>
</html>
2.3 flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex</title>
<style type="text/css">
.con{
min-height: 200px;
display: flex;
}
.con .left{
300px;
background: red;
}
.con .right{
300px;
background: blue;
}
.con .middle{
flex-grow: 1;
background: #ffa861;
}
</style>
</head>
<body>
<div class="con">
<div class="left"></div>
<div class="middle">
</div>
<div class="right"></div>
</div>
</body>
</html>