实现一个三列布局(左右侧固定，中间自适应宽度)_html/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;}

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

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