描述:左右宽度200px,中间自适应
第一种:浮动布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.box {
float: left;
height: 200px;
}
.center {
margin: 0 200px;
background: red;
height: 200px;
}
.left {
margin-left: -100%;
width: 200px;
background: yellow;
}
.right {
margin-left: -200px;
background: blue;
width: 200px;
}
</style>
//布局
<div class="container">
<div class="center">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
第二种:绝对定位布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 200px;
}
.container div {
height: 200px;
}
.left {
position: absolute;
width: 200px;
left: 0;
top: 0;
background: yellow;
}
.right {
position: absolute;
width: 200px;
right: 0;
top: 0;
background: blue;
}
.center {
margin: 0 200px;
background: red;
}
</style>
<div class="container">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
第三种:flex布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.container div {
height: 200px;
}
.left {
width: 200px;
background: yellow;
}
.right {
width: 200px;
background: blue;
}
.center {
flex: 1;
background: red;
}
</style>
<div class="container">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
第三种:table布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
display: table;
width: 100%;
}
.container div {
height: 200px;
display: table-cell;
}
.left {
width: 200px;
background: yellow;
}
.right {
width: 200px;
background: blue;
}
.center {
background: red;
}
</style>
<div class="container">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
第五种:网格布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
}
.container div {
height: 200px;
}
.left {
background: yellow;
}
.right {
background: blue;
}
.center {
background: red;
}
</style>
<div class="container">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
grid-template-rows 指定的每个值可以创建每行的高度;
grid-template-columns 指定的每个值来创建每列的列宽