css实现三栏布局，两边定宽，中间自适应

1、利用定位实现

css代码如下：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box1{position: relative;}
.left1{position: absolute;top:0;left:0;width: 100px;background: yellow;}
.main1{background: #09c;margin: 0 100px 0 100px;}
.right1{position: absolute;top:0;right:0;width: 100px;background: yellow;}

dom结构如下：

<div class="box" id="box1">
    <div class="left1">左侧定宽</div>
    <div class="main1">中间自适应</div>
    <div class="right1">右侧定宽</div>
</div>

2、利用 display: flex 实现

css代码如下：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box2{display: flex;display: -webkit-flex;}
.left2{left:0;width: 100px;background: yellow;}
.main2{background: #09c;flex:1;}
.right2{right:0;width: 100px;background: yellow;}

dom结构如下：

<div class="box" id="box2">
    <div class="left2">左侧定宽</div>
    <div class="main2">中间自适应</div>
    <div class="right2">右侧定宽</div>
</div>

3、利用 float 实现

css代码如下：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float:left;width: 100px;background: yellow;}
.right3{float:right;width: 100px;background: yellow;}
.main3{background: #09c;margin: 0 100px 0 100px;}

dom结构如下：

<div class="box" id="box3">
    <div class="left3">左侧定宽</div>
    <div class="right3">右侧定宽</div>
    <div class="main3">中间自适应</div>
</div>

实现效果如下图：

需要注意的是最后一种方法的dom结构是有变化的，浮动元素要写在前面。

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。