方案一、浮動佈局float
<html>
<head>
<style>
.container::after {
content: '';
display: block;
clear: both;
}
.container>div {
height: 100px;
}
.left {
background: #2196f3;
width: 200px;
float: left;
}
.center {
background: #ff9800;
margin-left: 200px;
margin-right: 200px;
}
.right {
background: #2196f3;
width: 200px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<div class="center">CENTER
<h3>float浮動佈局</h3>
</div>
</div>
</body>
</html>
注： 父元素使用僞類清除浮動，不影響其他元素的顯示
方案二、絕對定位
<html>
<head>
<style>
.container>div {
height: 100px;
}
.left {
background: #2196f3;
width: 200px;
position: absolute;
left: 0;
}
.center {
background: #ff9800;
position: absolute;
left: 200px;
right: 200px;
}
.right {
background: #2196f3;
width: 200px;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER
<h3>絕對定位</h3>
</div>
<div class="right">RIGHT</div>
</div>
</body>
</html>
方案三、table佈局
<html>
<head>
<style>
.container {
display: table;
width: 100%;
}
.container>div {
height: 100px;
}
.left, .center, .right {
display: table-cell;
}
.left {
background: #2196f3;
width: 200px;
}
.center {
background: #ff9800;
}
.right {
background: #2196f3;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER
<h3>table佈局</h3>
</div>
<div class="right">RIGHT</div>
</div>
</body>
</html>
方案四、彈性佈局（flex）
<html>
<head>
<style>
.container {
display: flex;
width: 100%;
}
.container>div {
height: 100px;
}
.left {
background: #2196f3;
width: 200px;
}
.center {
background: #ff9800;
flex: 1;
}
.right {
background: #2196f3;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER
<h3>flex佈局</h3>
</div>
<div class="right">RIGHT</div>
</div>
</body>
</html>
方案五、網格佈局（grid）
<html>
<head>
<style>
.container {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
.left, .right {
background: #2196f3;
}
.center {
background: #ff9800;
}
</style>
</head>
<body>
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER
<h3>grid佈局</h3>
</div>
<div class="right">RIGHT</div>
</div>
</body>
</html>
