css实现三栏布局（css3实现三栏布局,左右固定,中间自适应）

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：

css3实现三栏布局,左右固定,中间自适应

1：绝对定位

.outer {  position: relative;  height: 100px;}.left {  position: absolute;  width: 100px;  height: 100px;  background: tomato;}.right {  position: absolute;  top: 0;  right: 0;  width: 200px;  height: 100px;  background: gold;}.center {  margin-left: 100px;  margin-right: 200px;  height: 100px;  background: lightgreen;}

2：flex

.outer {  display: flex;  height: 100px;}.left {  width: 100px;  background: tomato;}.right {  width: 100px;  background: gold;}.center {  flex: 1;  background: lightgreen;}

.outer {  height: 100px;}.left {  float: left;  width: 100px;  height: 100px;  background: tomato;}.right {  float: right;  width: 200px;  height: 100px;  background: gold;}.center {  height: 100px;  margin-left: 100px;  margin-right: 200px;  background: lightgreen;}

3：圣杯布局

利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

.outer {  height: 100px;  padding-left: 100px;  padding-right: 200px;}.left {  position: relative;  left: -100px;  float: left;  margin-left: -100%;  width: 100px;  height: 100px;  background: tomato;}.right {  position: relative;  left: 200px;  float: right;  margin-left: -200px;  width: 200px;  height: 100px;  background: gold;}.center {  float: left;  width: 100%;  height: 100px;  background: lightgreen;}

以上更推荐属于flex布局方式

上面就是小居数码小编今天给大家介绍的关于（css3实现三栏布局,左右固定,中间自适应）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• 前端响应式设计（前端响应式布局几种方式）
• css布局实例（divcss布局实例）
• htmlcss手机端自适应网页（自适应网页设计和响应式网页设计）
• 实现高度内容自适应的textarea（页面高度自适应）

（281）个朋友认为回复得到帮助。