您的位置:首页> 前端教程> CSS3教程
文章导航

CSS columns 多列布局

2019-5-28 22:26| 作者: admin| 查看: 1693| 评论: 0|来自: 蚂蚁部落

本文并不会对多列布局的技术细节做介绍,而是从总体上介绍一下它的作用。

多列布局早就存在,并且应用非常的频繁,比如一个页面分为三列布局。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222649w1ss285tll5r3d7d.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图示中,页面的主体部分采用三列布局效果。

CSS3之前,实现上述效果主要通过浮动或者两位两种方式,通过CSS3新增的多列布局属性,可以在很多场景下比较轻松的实现多列布局。下面罗列两种比较常见的对多列布局属性的应用。

(1).文本多列显示:

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222707tdntnt222ad60cld.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述布局可以参阅CSS column-span一章节。

(2).瀑布流布局:

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222724y5tam5qtqeg7zqqq.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述布局可以参阅CSS columns多列布局瀑布流一章节。

相关阅读:

(1).CSS columns 属性一章节。

(2).CSS column-span 属性一章节。

(3).CSS column-gap 属性一章节。

(4).CSS column-rule 属性一章节。

(5).CSS3 column-count 属性一章节。

(6).CSS3 column-width 属性一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS columns下一篇:CSS appearance

最新评论

返回顶部