浮动实现
前面放置的两个div进行浮动，后面一个让其margin auto 居中
<style>
/* 浮动三栏 */
.father div {
width: 200px;
height: 200px;
}
.left {
background-color: red;
float: left;
}
.father .mid {
height: 200px;
width: 100%;
background-color: green;
margin: auto;
}
.right {
background-color: blue;
float: right;
}
.mid+div {
height: 100px;
width: 100%;
background-color: black;
}
</style>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
<div></div>
</div>
position定位实现
<style>
.left {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
right: 0;
}
.mid {
height: 100px;
width: 100%;
background-color: green;
margin: 0px auto;
}
</style>
<div class="father">
<div class="left">1</div>
<div class="right">2</div>
<div class="mid">3</div>
</div>
flex实现
<style>
.father {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.left {
width: 100px;
height: 100px;
background: red;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
}
.mid {
height: 100px;
width: 100px;
background-color: green;
/*相当于 flex-grow: 1; */
flex: 1;
}
</style>
<div class="father">
<div class="left">1</div>
<div class="mid">3</div>
<div class="right">2</div>
</div>