方案一、浮动布局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>
