CSS实现三栏布局的四种方法示例

2024-07-11 08:32:18

字体：大中小

来源：转载

供稿：网友

前言

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

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

1.绝对定位法

HTML代码如下:

<div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>

CSS代码如下：

//简单的进行CSS resetbody,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;}

该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

2. 圣杯布局

HTML代码如下：

//注意元素次序<div class="main">Main</div><div class="left">Left</div><div class="right">Right</div>

CSS代码如下：

//习惯性的CSS resetbody,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;}