1.中间固定宽度，两侧自适应 1.1 f lex 布局 !DOCTYPE html html lang="en" head meta charset="UTF-8" titleTitle/title style html,body,div{ height: 100%; } .left { background-color: #ccc; flex:1; } .middle { background-color: #75cc
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;
width: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;
width:calc((100% - 400px) / 2)
}
.middle {
background-color: #75cc23;
width: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;
width: 300px;
background: #72f5ff;
}
.con .right{
float: right;
width: 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;
width: 300px;
background: red;
}
.con .right{
right: 0;
width: 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{ width: 300px; background: red; } .con .right{ width: 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>