实现一个三列布局(左右侧固定，中间自适应宽度)_html/css_WEB-ITnose

左侧固定区
右侧固定区
中间自适应区

css代码：

第一种方法（定位）：

.left {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 200px;  background-color: red; } .mid {  margin-left: 100px;  margin-right: 200px;  height: 200px;  background-color: blue; } .right {  position: absolute;  top: 0;  right: 0;  width: 200px;  height: 200px;  background-color: yellow; }

第二种方法（浮动）：

.left { float: left; width: 100px; height: 200px; background-color: red;}.mid { height: 200px; background-color: blue;}.right { float: right; width: 200px; height: 200px; background-color: yellow;}

第三种方法（负边距）：

html代码：

  
     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区  
左边固定区
右边固定区

css代码：

.fl { float: left; }.center {  width: 100%;  height: 200px;  background: yellow;}  .center .mid{    margin-right: 100px;    padding: 0 110px;  }.left{    margin-left: -100%;    width: 100px;    height: 200px;    background: green;}.right{    margin-left: -200px;    width: 200px;    height: 200px;    background: blue;}