方法一：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>
本文摘录自其它博客，详情请点击