实现一个三列布局(左右侧固定，中间自适应宽度)-jimmie.Mr

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

.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;
}

 

 中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
 


左边固定区

右边固定区

.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;
}