以下5种布局方案均为两边固定中间自适应。
浮动布局
<section>
<style>
.float .left {
float: left;
width: 300px;
background-color: greenyellow;
}
.float .right {
float: right;
width: 300px;
background-color: greenyellow;
}
.float .center {
background-color: yellow;
}
</style>
<article class="float">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动布局</h1>
</div>
</article>
</section>
绝对定位布局
<section>
<style>
.absolute>div {
position: absolute;
}
.absolute .left {
left: 0;
width: 300px;
background-color: greenyellow;
}
.absolute .right {
right: 0;
width: 300px;
background-color: greenyellow;
}
.absolute .center {
left: 300px;
right: 300px;
background-color: yellow;
}
</style>
<article class="absolute">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位布局</h1>
</div>
</article>
</section>
flex布局
<section>
<style>
.flexbox {
display: flex;
}
.flexbox .left {
width: 300px;
background-color: greenyellow;
}
.flexbox .right {
width: 300px;
background-color: greenyellow;
}
.flexbox .center {
flex: 1;
background-color: yellow;
}
</style>
<article class="flexbox">
<div class="left"></div>
<div class="center">
<h1>flex布局</h1>
</div>
<div class="right"></div>
</article>
</section>
表格布局
<section>
<style>
.table {
width: 100%;
display: table;
height: 100px;
}
.table>div {
display: table-cell;
}
.table .left {
width: 300px;
background-color:greenyellow;
}
.table .right {
width: 300px;
background-color: greenyellow;
}
.table .center {
background-color: yellow;
}
</style>
<article class="table">
<div class="left"></div>
<div class="center">
<h1>表格布局</h1>
</div>
<div class="right"></div>
</article>
</section>
grid网格布局
<section>
<style>
.grid {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid .left {
background-color: greenyellow;
}
.grid .right {
background-color: greenyellow;
}
.grid .center {
background-color: yellow;
}
</style>
<article class="grid">
<div class="left"></div>
<div class="center">
<h1>网格布局</h1>
</div>
<div class="right"></div>
</article>
</section>