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结构是有变化的，浮动元素要写在前面。
如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。
优质内容筛选与推荐>>1、HTML鼠标造型
2、SQL存储过程在.NET数据库中的应用
3、《Design Patterns》跟我读――创建型模式（更新于06-12-03）(转)
4、Centos7 安装mysql数据库
5、C++ double转string类型以及MFC控件简单使用方法