专栏首页多云转晴五种方式实现三栏布局

五种方式实现三栏布局

在网页布局中,三栏布局是一种常见的布局方式,尤其在 PC 端。如下图所示。

三栏布局

从上到下由页头、内容和页脚组成,内容由左、中、右三列组成,其中左右两列的宽度固定,中间一列自适应。假设左右宽度是 100px,header 和 footer 的高度是 60px。

下面介绍五种方式,分别是:浮动、绝对定位、flex-boxgrid-box 和表格布局。

HTML 骨架如下:

<main>
    <header>header</header>
    <article>
        <section class="left">left</section>
        <section class="center">center</section>
        <section class="right">right</section>
    </article>
    <footer>footer</footer>
</main>

浮动布局

使用浮动需要把 HTML 骨架调整一下,将三个 section 的顺序调整为:

<!-- center 移到第一个 -->
<section class="center">center</section>
<section class="left">left</section>
<section class="right">right</section>

代码如下:

header{
    height: 60px;
}
footer{
    height: 60px;
    /* article 中的元素使用了浮动,这里清除一下 */
    clear: both;
}

article{
    /* 值是三个时,分别表示 上、左右、下 */
    /* 左右的 padding 值应与 left、right 区域宽度一致 */
    padding: 0 100px 0;
}

article section{
    float: left;
}

.center{
    /* 让中间的容器宽度等于父容器的宽度 */
    /* 父容器还有 padding,因此父容器两侧会有 100px 的空白区域 */
    width: 100%;
}
.left{
    width: 100px;
    /* margin 的值是百分比时,是相对于父容器的宽度 */
    /* -100% 会向左移动父容器的宽度那么长 */
    margin-left: -100%;
    /* 使用相对定位 */
    position: relative;
    right: 100px;
}

.right{
    width: 100px;
    margin-right: -100px;
}

这种实现被称为“圣杯布局”。除了上面的方式之外,使用浮动 + calc 也可以做到中间部分自适应。HTML 骨架也不需要做调整。代码如下:

header{
    height: 60px;
}
footer{
    height: 60px;
    clear: both;
}

article section{
    float: left;
}

.left {
    width: 100px;
}
.right {
    width: 100px;
}
.center{
    /* 宽度是一个计算值,用父容器宽度,减去左右容器的宽度 */
    width: calc(100% - 200px);
}

还有一种常见的使用浮动实现的三栏布局,被称为“双飞翼布局”。它的 HTML 结构如下:

<main>
    <header>header</header>
    <article class="container column">
        <section class="center">center</section>
    </article>
    <article class="left column">left</article>
    <article class="right column">right</article>
    <footer>footer</footer>
</main>

CSS 代码如下:

.container{
    width: 100%;
}

.column{
    float: left;
}

.center{
    margin: 0 100px 0;
}
.left{
    width: 100px;
    margin-left: -100%;
}
.right{
    width: 100px;
    margin-left: -100px;
}
footer{
    clear: both;
}

双飞翼布局与圣杯布局相似,不同的是双飞翼布局没有使用相对定位。

绝对定位

代码如下:

header{
    height: 60px;
}
footer{
    height: 60px;
}

article{
    position: relative;
}

article section{
    position: absolute;
    height: 200px;
}

.left {
    width: 100px;
}
.right {
    right: 0;
    width: 100px;
}
.center{
    /* 左右都设置值,可以让中间容器自适应 */
    left: 100px;
    right: 100px;
}

绝对定位不好的一点是,因为元素脱离了文档流,导致 footer 元素会“往上跑”,与定位元素重叠。要让 footer 跑到下面,需要做额外的样式处理,比如设置 margin-top、给 footer 也设置上绝对定位。如果三个容器的高度不一致,或者容器内的内容溢出,就会影响布局美观性。不推荐使用这种方式实现圣杯布局。

弹性盒子

使用弹性盒子很容易创建出圣杯布局。代码如下:

article{
    display: flex;
}
.left, .right{
    /* 这里的宽度也可以使用 flex 中的 flex-basis 属性 */
    /* flex-basis 表示 flex 元素在主轴方向上的初始大小 */
    /* flex-basis: 100px */
    width: 100px;
}
.center{
    flex-grow: 1;
}

flex-grow 是重点,它指定 flex 容器中剩余空间的多少应该分配给项目。因为左右容器的宽度都已经确定,如果指定是 1,表示剩余空间都分配给 .center 容器。如果是 .5 则表示分配一半空间给中间的容器。

网格布局

网格布局是新出的一种布局方式。首先改造一下 HTML 骨架。代码如下:

<main>
    <header>header</header>
    <section class="left">left</section>
    <section class="center">center</section>
    <section class="right">right</section>
    <footer>footer</footer>
</main>

然后是 CSS 代码:

main{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
}

header, footer{
    height: 60px;
    grid-column: 1/-1;
}

网格布局比较难理解,属性众多,但可以轻松布局出复杂的页面。解释一下上面的 css 代码。在 grid-template-columns 属性中设置了三列的页面布局。行数是自适应的。三列的左右两端都是 100px,中间是自适应,1fr 在这里会分配剩余的空间。

接着设置 headerfooter,重新设置它们占用的列数,1/-1 表示占满一行(自己独占一列)。

在不改变 HTML 骨架的情况下使用 grid 布局,只需要设置 article 容器为网格布局即可。代码如下:

article{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
}

两行代码就可以做到圣杯布局,足见网格布局的强大。

表格布局

使用表格布局也可以做到中间容器自适应,代码如下:

article{
    display: table;
    width: 100%;
}
article section{
    /* 子元素是单元格 */
    display: table-cell;
}
.left{
    width: 100px;
}
.right{
    width: 100px;
}

以上几种方式都可以做到中间容器自适应,但也有一个问题,如果浏览器窗口很小,中间容器的宽度会很短。

中间部分变得很窄

解决这个问题可以在 body 元素上设置一个最小宽度,当窗口宽度比这个宽度还要小时,就不再自适应。

body{
    min-width: 600px;
}

本文分享自微信公众号 - Neptune丶(Neptune_mh_0110),作者:多云转晴

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三种方法实现CSS三栏布局

    本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果。

    前端林子
  • 实现三栏布局

    使用CSS3的flex布局实现三栏布局,Flex布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持,此处主要是利用...

    WindrunnerMax
  • css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需:

    xing.org1^
  • 沉浸式状态栏的三种实现方式

    沉浸式算是目前Android行业比较流行的一种App设计风格,将菜单栏北京设置为导航栏的颜色,感觉顶部状态栏像是被入侵了一样,因此称为沉浸式菜单栏。本文将介绍三...

    开发者技术前线
  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • css布局-实现左中右布局的5种方式

    ? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    zhaoolee
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    王小婷
  • 移动端布局多种实现方式

    大象无痕
  • vue.js通过路由实现经典的三栏布局

    章鱼喵

扫码关注云+社区

领取腾讯云代金券