五种CSS方式实现三栏布局的方法

131 篇文章 1 订阅
本文详细介绍了五种实现三栏布局的技巧,包括浮动布局(圣杯布局和双飞翼布局)、绝对定位、弹性盒子(Flexbox)和网格布局。每种方法都有其特点和适用场景,如浮动布局通过调整元素顺序和浮动实现,绝对定位利用定位技术,弹性盒子和网格布局则利用现代CSS特性实现更简洁的代码。文章还讨论了如何处理窗口缩小时的布局问题,并给出了解决方案。
摘要由CSDN通过智能技术生成

转自:微点阅读  https://www.weidianyuedu.com

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

三栏布局

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

下面介绍五种方式,分别是:浮动、绝对定位、flex-box 和 grid-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 在这里会分配剩余的空间。

接着设置 header 和 footer,重新设置它们占用的列数,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;}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值