多语言展示
当前在线:1470今日阅读:26今日分享:39

CSS3中的布局(多列)

css3中的多列布局:分列成多少列,每列的宽度,列与列之间的距离(列间距),列边框,跨越列。
工具/原料

电脑,DW软件

方法/步骤
1

定义多列中的列数:column-count:number;(用数字来设置列数)

2

定义多列中每列的宽度(列宽):column-width:像素;                         auto(自动生成宽度)

3

缩写:columns:width count;

4

列与列之间的距离(列间距):column-gap:像素;

5

列边框(不占位):column-rule:width style color;(与边框border设置相似)

6

跨越列:column-span:none;(默认)                        all;(跨越所有列)

注意事项
1

布局需要添加兼容前缀

2

在设置列宽和列数时,以列宽为主(方法步骤2)

推荐信息