源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 714|回复: 12

[CSS] 浅谈CSS 多栏布局(Multi-Columns Layout)

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-9-20 15:41:53 | 显示全部楼层 |阅读模式
这篇文章主要介绍了浅谈CSS 多栏布局(Multi-Columns Layout)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

多栏布局是CSS3新增布局中的一种,尽管它很低调。

一、明确结构

多栏布局的结构很简单,主要由multi-column container和column box组成。

当一个元素设置了column-width和column-count属性并且值不为auto,那么这个元素就是multi-column container。

multi-column container内部通过多个column box来展示内容。

二、了解基本用法

 1、column-count和column-width

通过这两个属性,我们可以控制分栏的数目,但是相比较count属性,width属性就显得很灵活。

当设置width属性之后,并不是说分栏的宽度就是这个固定的值,它还会结合分栏布局容器中的宽度灵活的多增少减。

2018092015360954.png

2018092015360954.png  

2、column-rule和column-gap

这两个属性主要帮助我们设置分栏之间的间隙以及分栏的样式,还是比较好理解的:

2018092015360955.png

2018092015360955.png

这里你可以将column-rule的宽度设置的大一些,会有惊奇的发现哦。

3、column-span

这个属性和table中的span属性差不多,但是它只有none和all两个值,并且它前后的内容都得按照分栏布局规则重新排列。

2018092015360956.png

2018092015360956.png  

三、浅谈应用

掌握基础结构和用法之后,现在可以对一篇文章进行漂亮的排版了:

2018092015360957.png

2018092015360957.png

看起来的确不错,但是感觉有那么点怪。

怪在哪里呢?因为你几乎不会看到展示文章的网站中采用这种方式排版。(为了验证这一点特地查看了大部分的杂志或者新闻网站)。

其实看到这种多栏布局,我第一时间想到的是古书的排版,那么我们可以采用这种分栏布局实现古书的排版方式:

 .demo {
    width: 300px;
    margin: 100px auto;
    columns: 10;
    column-rule: 1px dashed rgb(213,213,213);
    direction: rtl;
    word-wrap: break-word;
    text-align: center;
  }

2018092015360958.png

2018092015360958.png

在采用多栏布局的方式实现这种效果时需要注意:

  • 每一栏的宽度必须控制在一个字左右,所以这里对于容器的宽度有严格的要求;
  • 通过word-wrap: break-word属性使中文的标点符号换行;

那么不用多栏布局是否也能实现上述的排版呢?当然可以!并且我们又要认识一个新的CSS3成员 -- writing-mode:

  .demo {
    width: 180px;
    margin: 50px auto;
    height: 170px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    writing-mode:vertical-rl;
    background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
    background-size: 30px 100%;
  }

2018092015360959.png

2018092015360959.png

这里唯一值得诟病的就是分栏的样式不能像分栏布局中的column-rule那样灵活的变动。

CSS总是给人很神奇的感觉,接下来我们用多栏布局实现九宫格布局:

2018092015361060.png

2018092015361060.png

它最大的缺点已经通过图中的数字展示的清清楚楚,实际上在实现这样的布局时,特别需要注意的就是子元素垂直方向margin造成的影响,这个就留给读者自己去实践吧。

四、总结

作为CSS3中新增的布局方式,相比较并没有flex那么引人注目,主要由于它解决的痛点相对比较的偏,但是从上述实现的九宫格布局不难看出它还是能搞点事情的。

参考资料--W3C

示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

回复

使用道具 举报

1

主题

1万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-10-3 08:49:44 | 显示全部楼层
额头额定法国队是范德萨
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2022-10-21 23:48:13 | 显示全部楼层
谢谢小Y分享
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2023-2-14 07:01:55 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2023-6-24 00:25:40 | 显示全部楼层
数据库了多久撒快乐的健身卡啦
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

176

积分

注册会员

Rank: 2

积分
176
发表于 2023-7-22 19:30:09 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2023-8-21 02:32:19 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2023-9-5 11:47:24 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-17 05:21:33 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

3

主题

1万

回帖

172

积分

注册会员

Rank: 2

积分
172
发表于 2024-5-5 09:25:47 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-9-21 08:27 , Processed in 0.124057 second(s), 29 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表