CSS三栏布局的四种方法

原创 2016年12月07日 22:25:39

前言

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

年华一去不复返,事业放弃再难成。

正文

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

1.绝对定位法

HTML代码如下:

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

CSS代码如下:

//简单的进行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 100px 200px 0px;
    height:100%;
    background: blue;
}

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

2. 圣杯布局

HTML代码如下:

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

CSS代码如下:

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

相关解释如下:
- (1)中间部分需要根据浏览器宽度的变化而变化,所以要用100%,这里设左中右向左浮动,因为中间100%,左层和右层根本没有位置上去
- (2)把左层margin负100后,发现left上去了,因为负到出窗口没位置了,只能往上挪
- (3)按第二步这个方法,可以得出它只要挪动窗口宽度那么宽就能到最左边了,利用负边距,把左右栏定位
- (4)但由于左右栏遮挡住了中间部分,于是采用相对定位方法,各自相对于自己把自己挪出去,得到最终结果

双飞翼布局

HTML代码如下:

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

CSS代码如下:

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

圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如上。增加多一个div就可以不用相对布局了,只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。

4. 浮动

HTML代码如下:

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

CSS代码如下:

//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 100px 200px 0px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

这种方式代码足够简洁与高效,也容易理解

后记

四种方法其实只有圣杯布局和双飞翼布局较难理解,但实际上理解了圣杯布局,双飞翼布局自然就理解了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

前端设计之CSS布局:上中下三栏自适应高度CSS布局

网页代码: CSS布局:上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !import...

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局...

Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局

一、Flex主要解决两个问题:1、元素位置:由6个容器属性和2个项目属性控制6个容器属性 flex-direction flex-wrap flex-flow justi...

圣杯布局与双飞翼布局的实现&区别

圣杯布局与双飞翼布局的目的都是为了实现三列等高布局,并且左右两列定宽,中间一列宽度自适应。下面分别讨论一下: 1、圣杯布局 首先解释一下此布局和圣杯没有一毛钱关系~~~我也不知道为啥就叫这个名字了...

这可能是史上最全的CSS自适应布局总结

标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入! 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。 大体上,布局中会用到的有:尺寸相...

圣杯布局和双飞翼布局(前端面试必看)

圣杯布局和双飞翼布局(前端面试必看) 稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学...

css实现等高布局 两栏自适应布局 三栏自适应布局

总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法 padding补值法 该方法是通过负margin,同时将padding的值设为正的margin值实现的 具体实现方...

用CSS实现布局(两栏布局,多栏布局)

在网页上的布局比较经典的是两栏布局和三栏布局。 两栏布局 两栏布局是主内容区为主,左(右)侧有一栏,代码如下: style> #header...

HTML&CSS三列布局

1.利用margin值为负数 左右宽度固定中间自适应 测试页 body{ margin: 0; padding: 0; } .main{ back...

15个不错的jQuery的table表格操作插件

1.DataTables-强大的jQuery表格插件   DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS三栏布局的四种方法
举报原因:
原因补充:

(最多只允许输入30个字)