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

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

作用：column-count作用主要是用来描述一个Multi元素的列数

语法：column-count: auto || 数字

取值说明：

1. auto：此值为column-count的默认值，当column-count没有设置任何值时，默认的值就是auto，此时的栏数是根据别的参数来确定的，比如说列宽width

2. 数字：这里可以是任何正整数数字，但不可以带有任何单位，用来表示Multi元素分列的列数

HTML：

CSS：

首先看第一种情况：column-count:auto。前面也说过，当column-count取值为auto时，元素分栏是由其他属性决定的比如说，比如这里的column-width，具体我们来看代码如何实现

其实column-count值为auto时，可以不要显式的设置，因为其默认值就是auto，所以上面的代码中大家可以尝试的把column-count:auto这个去掉，看看结果不是不是一样。这里有一点需要说明的就是当只用column-width来控制显示的列数时，其column-width的取值最好不要超过下面公式计算出来的值

就拿本例来说，n=2,font-size:14px;那么column-width的值应该是(400-14)/2=193px（Opera下最好再减1个px，当然如果你是中文的话也最好这样做，减1-2px，至于为什么，我也说不清楚。）;当你把column-width值大于193px时，只会显示一列

上面是column-count取值为auto的使用，现在一起来看其取值为具体数值时的应用，基于前面的实例，把列数换成三列

二. column-width

作用：column-width属性是用来控制Multi元素的列宽

语法：column-width: `<length>` || auto

取值说明：

1. auto:此值是其默认值。如果column-width设置值为auto或者没有显式的设置值时，此时Multi元素的列宽将由其他属性来决定，比如前面的实例就是由column-count来决定的（当然column-count的值不能为auto了，不然是无效果的）

2. `<length>`：此值使用固定值来设置Multi元素的宽度，其单位可以是px或者em；但不能是负值

首先来看一个普通的例子，这里所说的普通就是指元素分列的列宽不指定确定的宽度值，并且其他参数都为默认值

从效果中清楚的知道，给Multi元素仅设置auto是没有任何效果的，因为此时的值是需要根据元素的列数来定的，在这里并没有指定列数的值，所以默认为1列

在上面的实例的基础上，变通一下，给他加上一个column-count:2

注：当column-width为auto时需要配合column-count的设置才能有分列效果

总结：count和width两个属性不能同时都为auto，只能其中一个值为auto

特例：当列的宽度大于元素容器的宽度的情况

上图效果告诉我们，虽然设置的列宽大于元素容器的宽度，但并不会让元素内容按列的宽度进行布局从而撑破元素容器，而是会把列宽降到与元素容器宽度相等

三. columns

作用：columns是把前面两个属性合并在一起使用

语法：columns: column-width || column-count

取值说明：olumn-width和column-count分别是指列的宽度和列数

CSS之Multi-columns的列数和列宽相关推荐

得到Raster的一些基本信息（高程值，列数，列数）
得到Raster的一些基本信息(高程值,列数,列数) IRasterLayer pRasterLayer = (IRasterLayer)pSC1.Scene.get_Layer(0); IRaste ...
JFrame setLayout(new GridLayout(行数,列数,行间距,列间距));
setLayout(new GridLayout(行数,列数,行间距,列间距)); import java.awt.*; import javax.swing.*; public class demo ...
Excel列数和列字母的转换(column number 和 column letters 互转)
利用下面两个函数,可以实现excel 列总数和列字母的相互转换. public string ConvertColumnNum2String(int columnNum) { if (co ...
C#合并两张表结构相同(列数和列类型都相同)的表
DataTable appendDataTable=new DataTable(); 这个合并的大前提是两张表的结构相同且列的类型也必须相同否则在赋值时就会出现异常. for (int i = 0; ...
【数据库】sqlite中的限制：数据库大小、表数、列数、行数、参数个数、连接数等
目录一.参考网址二.详解 1.查看.设置sqlite限制命令.limit 2.SQLite中的限制汇总 1)字符串或BLOB的最大长度 2)最大列数 3)SQL语句的最大长度 4)联接中的最大表数 ...
表格列数太多页面怎么设计_B端产品设计规范分享
加入彩虹的一年来,接触的都是B端产品大大小参与设计了七八个项目,从中总结了一些经验给大家参考,当然依旧还会有一些不足,后期也会不定期优化更新.B端设计与C端大有不同.C端Consumer,表示为消费者 ...
vue前端导出excel，js-xlsx、xlsxStyle，可设置样式、表格合并；(包含获取excel列数函数、excel合并表格缺少边框处理函数）
工作过程中遇到导出excel,记录以便下次快速开发(会按照table布局(不含table样式,样式需要在样式method添加,commonStyle是默认样式)直接导出excel,包含表格合并布局) ...
Pandas 获取 Dataframe 总的行数和列数
Pandas 获取 DataFam 总的行数和列数返回列数: df.shape[1] 返回行数: df.shape[0] 或者:len(df)
Columns函数：返回数据表区域的总列数。
COLUMNS( $ C: $ H) 返回结果为6 返回区域的总列数,利用该技巧可以避免人为对区域列数的手工计算,将直接返回指定区域中最后一列的序号

CSS之Multi-columns的列数和列宽

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

作用：column-count作用主要是用来描述一个Multi元素的列数

语法：column-count: auto || 数字

取值说明：

1. auto：此值为column-count的默认值，当column-count没有设置任何值时，默认的值就是auto，此时的栏数是根据别的参数来确定的，比如说列宽width

2. 数字：这里可以是任何正整数数字，但不可以带有任何单位，用来表示Multi元素分列的列数

HTML：

CSS：

首先看第一种情况：column-count:auto。前面也说过，当column-count取值为auto时，元素分栏是由其他属性决定的比如说，比如这里的column-width，具体我们来看代码如何实现

就拿本例来说，n=2,font-size:14px;那么column-width的值应该是(400-14)/2=193px（Opera下最好再减1个px，当然如果你是中文的话也最好这样做，减1-2px，至于为什么，我也说不清楚。）;当你把column-width值大于193px时，只会显示一列

上面是column-count取值为auto的使用，现在一起来看其取值为具体数值时的应用，基于前面的实例，把列数换成三列

二. column-width

作用：column-width属性是用来控制Multi元素的列宽

语法：column-width: `<length>` || auto

取值说明：

1. auto:此值是其默认值。如果column-width设置值为auto或者没有显式的设置值时，此时Multi元素的列宽将由其他属性来决定，比如前面的实例就是由column-count来决定的（当然column-count的值不能为auto了，不然是无效果的）

2. `<length>`：此值使用固定值来设置Multi元素的宽度，其单位可以是px或者em；但不能是负值

首先来看一个普通的例子，这里所说的普通就是指元素分列的列宽不指定确定的宽度值，并且其他参数都为默认值

从效果中清楚的知道，给Multi元素仅设置auto是没有任何效果的，因为此时的值是需要根据元素的列数来定的，在这里并没有指定列数的值，所以默认为1列

在上面的实例的基础上，变通一下，给他加上一个column-count:2

注：当column-width为auto时需要配合column-count的设置才能有分列效果

总结：count和width两个属性不能同时都为auto，只能其中一个值为auto

特例：当列的宽度大于元素容器的宽度的情况

上图效果告诉我们，虽然设置的列宽大于元素容器的宽度，但并不会让元素内容按列的宽度进行布局从而撑破元素容器，而是会把列宽降到与元素容器宽度相等

三. columns

作用：columns是把前面两个属性合并在一起使用

语法：columns: column-width || column-count

取值说明：olumn-width和column-count分别是指列的宽度和列数

CSS之Multi-columns的列数和列宽相关推荐

最新文章

热门文章

CSS之Multi-columns的列数和列宽

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

作用：column-count作用主要是用来描述一个Multi元素的列数

语法：column-count: auto || 数字

取值说明：

1. auto：此值为column-count的默认值，当column-count没有设置任何值时，默认的值就是auto，此时的栏数是根据别的参数来确定的，比如说列宽width

2. 数字：这里可以是任何正整数数字，但不可以带有任何单位，用来表示Multi元素分列的列数

HTML：

CSS：

首先看第一种情况：column-count:auto。前面也说过，当column-count取值为auto时，元素分栏是由其他属性决定的比如说，比如这里的column-width，具体我们来看代码如何实现

就拿本例来说，n=2,font-size:14px;那么column-width的值应该是(400-14)/2=193px（Opera下最好再减1个px，当然如果你是中文的话也最好这样做，减1-2px，至于为什么，我也说不清楚。）;当你把column-width值大于193px时，只会显示一列

上面是column-count取值为auto的使用，现在一起来看其取值为具体数值时的应用，基于前面的实例，把列数换成三列

二. column-width

作用：column-width属性是用来控制Multi元素的列宽

语法：column-width: <length> || auto

取值说明：

1. auto:此值是其默认值。如果column-width设置值为auto或者没有显式的设置值时，此时Multi元素的列宽将由其他属性来决定，比如前面的实例就是由column-count来决定的（当然column-count的值不能为auto了，不然是无效果的）

2. <length>：此值使用固定值来设置Multi元素的宽度，其单位可以是px或者em；但不能是负值

首先来看一个普通的例子，这里所说的普通就是指元素分列的列宽不指定确定的宽度值，并且其他参数都为默认值

从效果中清楚的知道，给Multi元素仅设置auto是没有任何效果的，因为此时的值是需要根据元素的列数来定的，在这里并没有指定列数的值，所以默认为1列

在上面的实例的基础上，变通一下，给他加上一个column-count:2

注：当column-width为auto时需要配合column-count的设置才能有分列效果

总结：count和width两个属性不能同时都为auto，只能其中一个值为auto

特例：当列的宽度大于元素容器的宽度的情况

上图效果告诉我们，虽然设置的列宽大于元素容器的宽度，但并不会让元素内容按列的宽度进行布局从而撑破元素容器，而是会把列宽降到与元素容器宽度相等

三. columns

作用：columns是把前面两个属性合并在一起使用

语法：columns: column-width || column-count

取值说明：olumn-width和column-count分别是指列的宽度和列数

CSS之Multi-columns的列数和列宽相关推荐

最新文章

热门文章

语法：column-width: `<length>` || auto

2. `<length>`：此值使用固定值来设置Multi元素的宽度，其单位可以是px或者em；但不能是负值