简述:定高100px,左右宽度均为200px,中间自适应。
1、浮动—float
<div class="wrap float">
<div class="left">我是左边栏</div>
<div class="right">我是右边栏</div>
<div class="center">我是float</div>
</div>
<style>
.wrap > div {
height: 200px;
text-align: center;
line-height: 200px;
}
.float .left {
width: 200px;
float: left;
background-color: #f00;
}
.float .center {
background-color: green;
margin: 0 200px;
}
.float .right {
width: 200px;
float: right;
background-color: #ff0;
}
</style>
2、定位—position
<div class="wrap position">
<div class="left">我是左边栏</div>
<div class="center">我是position</div>
<div class="right">我是右边栏</div>
</div>
<style>
.position .left {
width: 200px;
position: absolute;
left: 0;
background-color: #f00;
}
.position .center {
background-color: green;
position: absolute;
left: 200px;
right: 200px;
}
.position .right {
width: 200px;
position: absolute;
right: 0;
background-color: #ff0;
}
</style>
3、弹性盒子布局—flex
<div class="wrap flexbox">
<div class="left">我是左边栏</div>
<div class="center">flexbox</div>
<div class="right">我是右边栏</div>
</div>
<style>
.flexbox {display: flex; margin-top: 220px;}
.flexbox .left {
width: 200px;
background-color: #f00;
}
.flexbox .center {
flex: 1;
background-color: green;
}
.flexbox .right {
width: 200px;
background-color: #ff0;
}
</style>
4、表格布局—table
<div class="wrap table">
<div class="left">我是左边栏</div>
<div class="center">table</div>
<div class="right">我是右边栏</div>
</div>
<style>
.table {display: table; width: 100%;}
.table > div {display: table-cell}
.table .left {
width: 200px;
background-color: #f00;
}
.table .center {
background-color: green;
}
.table .right {
width: 200px;
background-color: #ff0;
}
</style>
5、网格布局—grid
<div class="wrap grid">
<div class="left">我是左边栏</div>
<div class="center">grid</div>
<div class="right">我是右边栏</div>
</div>
<style>
.grid {
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
}
.grid .left {
background-color: #f00;
}
.grid .center {
background-color: green;
}
.grid .right {
background-color: #ff0;
}
</style>
<div class="wrap grid">
<div class="left">我是左边栏</div>
<div class="center">grid</div>
<div class="right">我是右边栏</div>
</div>
转载于 https://blog.csdn.net/dou_xiaobao/article/details/107783378