方法一:float解决方案
<section class="layout float">
<style>
.layout.float {
width: 100%;
height: 100px;
}
.layout.float .floatleft-center-right>div {
height: 100px;
}
.floatleft-center-right .left {
background: red;
width: 300px;
float: left;
}
.floatleft-center-right .center {
background: yellow;
}
.floatleft-center-right .right {
background: blue;
width: 300px;
float: right;
}
</style>
<article class="floatleft-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<p>float解决方案</p>
<p>float解决方案</p>
<p>float解决方案</p>
</div>
</article>
</section>
方法二:绝对定位position解决方案
<section class="layout position">
<style>
.layout.position {
width: 100%;
height: 100px;
position: relative
}
.layout.position .positionleft-center-right>div {
height: 100px;
position: absolute;
}
.positionleft-center-right .left {
background: red;
width: 300px;
left: 0;
}
.positionleft-center-right .center {
background: yellow;
left: 300px;
right: 300px;
}
.positionleft-center-right .right {
background: blue;
width: 300px;
right: 0;
}
</style>
<article class="positionleft-center-right">
<div class="left"></div>
<div class="center">
<p>position解决方案</p>
<p>position解决方案</p>
<p>position解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
方法三:flex解决方案
<section class="layout flexbox">
<style>
.layout.flexbox {
width: 100%;
height: 100px;
}
.flexLeft-center-right {
display: flex;
}
.flexLeft-center-right>div {
height: 100px;
}
.flexLeft-center-right .left {
background: red;
width: 300px;
}
.flexLeft-center-right .center {
background: yellow;
flex: 1;
}
.flexLeft-center-right .right {
background: blue;
width: 300px;
}
</style>
<article class="flexLeft-center-right">
<div class="left"></div>
<div class="center">
<p>flexBox解决方案</p>
<p>flexBox解决方案</p>
<p>flexBox解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
方法四:table解决方案
<section class="layout table">
<style>
.layout.table .tableLeft-center-right {
width: 100%;
height: 100px;
display: table;
}
.tableLeft-center-right>div {
display: table-cell;
}
.tableLeft-center-right .left {
background: red;
width: 300px;
}
.tableLeft-center-right .center {
background: yellow;
}
.tableLeft-center-right .right {
width: 300px;
background: blue;
}
</style>
<article class="tableLeft-center-right">
<div class="left"></div>
<div class="center">
<p>table解决方案</p>
<p>table解决方案</p>
<p>table解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
方法五:grid解决方案
<section class="layout grid">
<style media="screen">
.layout.grid .gridLeft-center-right {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.gridLeft-center-right .left{
background: red;
}
.gridLeft-center-right .center{
background: yellow;
}
.gridLeft-center-right .right{
background: blue;
}
</style>
<article class="gridLeft-center-right">
<div class="left"></div>
<div class="center">
<p>grid解决方案</p>
<p>grid解决方案</p>
<p>grid解决方案</p>
</div>
<div class="right"></div>
</article>
</section>