三栏布局的四种实现方式-中间自适应

2018-12-28 本文已影响0人 bossahack

左右固定，中间自适应，纯css的实现方式

</div>

<style>

div[class*="main"]{margin-top: 20px;}

.main div{height: 50px;}

.main .left{width: 200px;float: left;background: red;}

.main .right{width: 300px;float: right;background: green}

.main .middle{margin-left: 210px;margin-right: 310px;background: grey}

</style>

</div>

<style>

.main1 div{height: 50px;}

.main1 .left{width: 200px;float: left;background: red;}

.main1 .right{width: 20%;float: right;background: green}

.main1 .middle{margin-left: 210px;margin-right: 21%;background: grey}

</style>

</div>

<style>

.main2{display: flex;}

.main2 .left{width: 200px;background: red;}

.main2 .right{width: 20%;background: green}

.main2 .middle{background: grey;flex: 1}

</style>

</div>

<style>

.main3 .left{width: 200px;background: red;float: left;}

.main3 .right{width: 20%;background: green;float: left;}

.main3 .middle{background: grey;float: left;width: calc(100% - 200px - 20%)}

</style>