CSS怎么实现三栏布局

这篇文章主要介绍CSS怎么实现三栏布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事做网站、网站制作、企业网站建设、手机网站制作设计、网页设计、品牌网站制作、网页制作、做网站、建网站。成都创新互联拥有实力坚强的技术研发团队及素养的视觉设计专才。

前言

其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。

所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。

1.绝对定位法

HTML代码如下:

Left

Main

//简单的进行CSS reset body,html{ height:100%; padding: 0px; margin:0px; } //左右绝对定位 .left,.right{ position: absolute; top:0px; background: red; height:100%; } .left{ left:0; width:100px; } .right{ right:0px; width:200px; } //中间使用margin空出左右元素所占据的空间 .main{ margin:0px 200px 0px 100px; height:100%; background: blue; }

//习惯性的CSS reset body,html{ height:100%; padding: 0; margin: 0 } //父元素body空出左右栏位 body { padding-left: 100px; padding-right: 200px; } //左边元素更改 .left { background: red; width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%; } //中间部分 .main { background: blue; width: 100%; height: 100%; float: left; } //右边元素定义 .right { background: red; width: 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px; }

//CSS reset body,html { height:100%; padding: 0; margin: 0 } body { /*padding-left:100px;*/ /*padding-right:200px;*/ } .left { background: red; width: 100px; float: left; margin-left: -100%; height: 100%; /*position: relative;*/ /*left:-100px;*/ } .main { background: blue; width: 100%; float: left; height: 100%; } .right { background: red; width: 200px; float: left; margin-left: -200px; height: 100%; /*position:relative;*/ /*right:-200px;*/ } //新增inner元素 .inner { margin-left: 100px; margin-right: 200px; }

//CSS reset body,html { height:100%; padding: 0; margin: 0 } //左栏左浮动 .left { background: red; width: 100px; float: left; height: 100%; } //中间自适应 .main { background: blue; height: 100%; margin:0px 200px 0px 100px; } //右栏右浮动 .right { background: red; width: 200px; float: right; height: 100%; }

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

CSS怎么实现三栏布局

其他资讯