三栏布局

三栏布局

说明：左右定宽，中间自适应宽度

方法一 : 利用 calc

css

<style>
        body{
            font-size: 0;
        }
        .one {
            display: inline-block;
            width: 100px;
            height: 200px;
            background-color: #5E6267;
        }
        .two {
            display: inline-block;
            width: calc(100% - 200px);
            height: 200px;
            background-color: #5daf34;

        }
        .three{
            display: inline-block;
            width: 100px;
            height: 200px;
            background-color: #1E82D9;
        }
    </style>

html

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>