如何使用CSS实现三栏自适应布局

这篇文章将为大家详细讲解有关如何使用CSS实现三栏自适应布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站制作、大祥网络推广、小程序设计、大祥网络营销、大祥企业策划、大祥品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供大祥建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

1. 基于传统的position和margin等属性进行布局

这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。

1).绝对定位法

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

代码如下：



 
  
  layout_box
  
 
 
  实现三列宽度自适应布局
  我是左边

我是右边

html,body{ margin: 0px;width: 100%; } h4{height: 100px;margin:20px 0 0;} #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;} #left{left:0px;} #right{right: 0px;} #center{margin:2px 210px ;background-color: #eee;height: 200px; }

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 } #left_self {float: left;} #right_self{float: right;} #center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;} #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; } #left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange } #left_margin {margin-left: -100%; background-color: lightpink} #right_margin{margin-left: -200px;}

#box{width:100%;display: flex; height: 100px;margin: 10px;} #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink} #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

大橙子网站建设，新征程启航

如何使用CSS实现三栏自适应布局

实现三列宽度自适应布局

使用自身浮动法定位

使用margin负值法进行布局

其他资讯