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

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

php中文网

发布： 2016-06-24 11:20:56

原创

1682人浏览过

html代码(第一二种方法):

<div class="left">左侧固定区</div><div class="right">右侧固定区</div><div class="mid">中间自适应区</div>

登录后复制

立即学习“前端免费学习笔记（深入）”；

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

查看详情

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代码：

<div class="center fl">  <div class="mid">     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区  </div></div><div class="left fl">左边固定区</div><div class="right fl">右边固定区</div>

登录后复制

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

立即学习“前端免费学习笔记（深入）”；