Open
Description
1.flex
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>waiting</title>
<style>
* { padding: 0; margin: 0;}
header,footer {
height: 50px;
background: #eee;
}
.container {
display: flex;
}
.left,.right { background:green;width: 200px;}
.middle {
flex: 1;
background: hotpink;
}
</style>
</head>
<body>
<header>头部</header>
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>
</html>2.float + calc
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>waiting</title>
<style>
* { padding: 0; margin: 0;}
header,footer {
height: 50px;
background: #eee;
}
.container {
}
.container div { float: left;}
.left,.right { background:green;width: 200px;}
.middle {
background: hotpink;
width: calc(100% - 400px);
min-width: 200px;
}
</style>
</head>
<body>
<header>头部</header>
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>
</html>3.float + margin
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>waiting</title>
<style>
* { padding: 0; margin: 0;}
header,footer {
height: 50px;
background: #eee;
}
.container {
padding: 0 200px;
overflow: hidden;
}
.container div { float: left;}
.left,.right { background:green;width: 200px; position: relative;}
.left { margin-left: -100%; left: -200px;}
.middle {
background: hotpink;
width: 100%;
}
.right { margin-left: -200px; left: 200px;}
</style>
</head>
<body>
<header>头部</header>
<div class="container">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<footer>尾部</footer>
</body>
</html>4,float
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>waiting</title>
<style>
* { padding: 0; margin: 0;}
header,footer {
height: 50px;
background: #eee;
}
.container {
overflow: hidden;
}
.left,.right { background:green;width: 200px; position: relative;}
.left { float: left;}
.middle {
background: hotpink;
width: 100%;
}
.right { float: right;}
</style>
</head>
<body>
<header>头部</header>
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>
<footer>尾部</footer>
</body>
</html>5.绝对定位
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>waiting</title>
<style>
* { padding: 0; margin: 0;}
header,footer {
height: 50px;
background: #eee;
}
.container {
position: relative;
}
.left,.right { background:green;width: 200px; position: absolute;}
.left { left: 0;}
.middle {
position: absolute;
background: hotpink;
left: 200px;
right: 200px;
}
.right { right: 0;}
</style>
</head>
<body>
<header>头部</header>
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>
<footer>尾部</footer>
</body>
</html>6.grid
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>waiting</title>
<style>
* { padding: 0; margin: 0;}
body {display: grid;}
header,footer {
height: 50px;
background: #eee;
grid-column: 1/5;
}
header{
grid-row: 1;
}
footer{
grid-row: 3;
}
.left,.right,.middle { grid-row: 2;}
.left {
grid-column: 1/2;
background: red;
}
.middle {
grid-column: 2/4;
background: green;
}
.right {
grid-column: 4/5;
background: red;
}
</style>
</head>
<body>
<header>头部</header>
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
<footer>尾部</footer>
</body>
</html>参考：