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布局基础——(三栏布局)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

图解互联网金融

图解互联网金融

史册 / 化学工业出版社 / 2015-1-1 / 39.80元

《图解互联网金融》用“漫画+图解”的形式,为普通人讲述最实用的互联网金融知识。 全书从互联网金融的全景、第三方支付、P2P网贷、众筹、互联网销售平台、互联网理财、网络银行、互联网保险八个方面,全面解读了互联网金融的运营模式、发展前景和风险防控等内容。能帮助读者更好地利用互联网金融为自己创造财富。 《图解互联网金融》适合对互联网金融感兴趣的读者阅读。一起来看看 《图解互联网金融》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具