CSS3 Multi-columns 之列数和列宽

Multi-column”译成中文就是“多列”,这个"Multi-column"是W3CCSS3增加的一个多列布局模块(CSS Multi-column Layout Module)。它主要应用在文本的多列布局方面,对于文本的多列布局我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示:

对于上图的两列布局,我想Web攻城师们实现起来还是有相当大的难度。但是CSS3的“Multi-column”就可以帮大家解决上面这样的多列布局,所以Web攻城师们掌握了这个新的设计方法也就掌握了一样新的技术,那么今天开始主要和大家一起探讨一下CSS3的“Multi-column”使用方法和注意事项。

CSS3的"Multi-column"按大块主要分成以下几块:

1、列数和列宽column-count;column-width;columns

2、列的间距和分列样式column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule;

3、列的分栏符break-before;break-after;break-inside;

4、跨越列column-span;

5、填充列column-fill

从今天开始花几节专门针对上面所列每个部分的东西进行介绍,首先开始第一部分列数和列宽

一、column-count

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/content/css3-multi-columns-count-and-width

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部