CSS布局基础——(三栏布局)

栏目: CSS · 发布时间: 5年前

内容简介:大家总是听到双飞翼布局和圣杯布局...也不知道是谁取的名字,我就叫三栏布局吧。虽然他们有些细微的区别,但本质上都是实现一个三栏布局,即左右两栏固定,中间自适应。网上随便一搜,全是实现方案,少到两三种,多到七八种。各种方法都有优缺点,但我觉得比较实用的方法主要就那三四种,因为很多方法其实是被淘汰的或者说太麻烦(如表格布局)。实现思路:

前言

大家总是听到双飞翼布局和圣杯布局...也不知道是谁取的名字,我就叫三栏布局吧。虽然他们有些细微的区别,但本质上都是实现一个三栏布局,即左右两栏固定,中间自适应。

实现方案

网上随便一搜,全是实现方案,少到两三种,多到七八种。各种方法都有优缺点,但我觉得比较实用的方法主要就那三四种,因为很多方法其实是被淘汰的或者说太麻烦(如表格布局)。

  • 浮动方案
  • 绝对定位方案
  • flex布局方案
  • 网格布局(本章不讲)

方案一:浮动方案

实现思路:

先将左右两栏进行浮动,左边栏向左浮动,右边栏向右浮动就能固定在两边。但是要注意一点,这种方法要将中间栏放在最后,因为如果将中间栏放在中间,并且没有对自身进行浮动的话,会占据文档中的位置,导致右边栏并不能完全和左边栏平齐。

HTML:

<!-- 三栏布局 浮动定位-->
    <div class="layout">
        <header>头部</header>
        <main>
            <div class="left">左边栏</div>
            <div class="right">右边栏</div>
            <div class="center">中间栏</div>
        </main>
        <footer>底部</footer>
    </div>
    <!-- 三栏布局 浮动定位-->

SCSS:

//浮动布局
.layout {
    color:white;
    text-align: center;
    height: 100%;
    overflow: hidden;
    header,footer{
        width: 100%;
        height: 70px;
        background: rgb(202,132,2);
    }
    footer {
        position: absolute;
        bottom: 0;
    }
    main {
        width: 100%;
        height: 100%;
        background: red;
        .left,.right {
            width: 300px;
            height: 100%;
            background: rgb(14, 214, 171);
        }
        .left {
            float:left;
        }
        .right{
            float:right;
        }
        .center {
            height:100%;
            background: rgb(26, 26, 122);
        }
    }
    
}

效果:

CSS布局基础——(三栏布局)

缺点:

浮动元素会脱离文档流,如果在 <main> 的内部还有其他元素,有可能会因为父元素的高度塌陷而导致问题。所以要么给父元素设置高度,要么就要清除浮动了。

方案二:绝对定位方案

实现思路:

将左右两栏进行绝对定位,固定在左右两边,中间栏通过左右margin距离来适应宽度。同样,这种方法要注意中间栏在HTML结构中的位置,如果中间栏在中间,那么中间栏也要进行绝对定位,如果在最后面则不需要进行绝对定位。

HTML:

<!-- 三栏布局 绝对定位-->
    <div class="layout">
        <header>绝对定位方案</header>
        <main>
            <div class="left">左边栏</div>
            <div class="right">右边栏</div>
            <div class="center">中间栏</div>
        </main>
        <footer>底部</footer>
    </div>
    <!-- 三栏布局 绝对定位-->

SCSS:

// 绝对定位布局
.layout {
    color:white;
    text-align: center;
    height: 100%;
    overflow: hidden;
    header,footer{
        width: 100%;
        height: 60px;
        background: rgb(202,132,2);
    }
    footer {
        position: absolute;
        bottom: 0;
    }
    main {
        width: 100%;
        height: 100%;
        background: red;
        position: relative;
        .left,.right{
            position: absolute;
            width: 300px;
            height: 100%;
            background: rgba(100, 96, 87,0.5);
        }
        .left {
            left:0
        }
        .right {
            right:0;
            //top:0;
        }

        .center {
            height: 100%;
            margin:auto 300px;
            left:0;
            right:0;
            background: blue;
        }
    }
    
}

效果:

CSS布局基础——(三栏布局)

缺点:

绝对定位同样会脱离文档流,如果其他元素位置有要求的话,需要继续设置定位。

方案三:Flex方案

实现思路:

弹性布局十分简单,给最外层的父级元素设置为弹性盒子,然后设置两端对齐,中间栏的宽度设为100%即可。

HTML:

<!-- 三栏布局 flex布局-->
    <div class="layout">
        <header>flex方案</header>
        <main>
            <div class="left">左边栏</div>
            <div class="center">中间栏</div>
            <div class="right">右边栏</div>
        </main>
        <footer>底部</footer>
    </div>
    <!-- 三栏布局 flex布局-->

SCSS:

//flex布局
.layout {
    color:white;
    text-align: center;
    height: 100%;
    overflow: hidden;
    header,footer{
        width: 100%;
        height: 60px;
        background: rgb(202,132,2);
        text-align: center;
    }
    footer {
        position: absolute;
        bottom: 0;
    }
    main {
        width: 100%;
        height: 100%;
        background: red;
        display:flex;
        justify-content: space-between;
        .left,.right {
            width: 300px;
            height: 100%;
            background: rgb(18, 157, 167);
        }
        .center {
            width: 100%;
            height:100%;
            background: blue;
        }
    }
}

效果:

CSS布局基础——(三栏布局)

缺点:

flex是CSS3才有的,浏览器兼容性最低到IE8。


以上所述就是小编给大家介绍的《CSS布局基础——(三栏布局)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

概率

概率

[俄]施利亚耶夫 / 周概容 / 高等教育出版社 / 2008-1 / 48.00元

《概率(第2卷)(修订和补充第3版)》是俄国著名数学家A.H.施利亚耶夫的力作。施利亚耶夫是现代概率论奠基人、前苏联科学院院士、著名数学家A.H.柯尔莫戈洛夫的学生,在概率统计界和金融数学界影响极大。《概率(第2卷)(修订和补充第3版)》作为莫斯科大学最为出色的概率教材之一。分为一、二两卷,并配有习题集。第二卷《概率(第2卷)(修订和补充第3版)》是离散时间随机过程(随机序列)的内容。重点讲述(强......一起来看看 《概率》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具