多列总结

未东兴发布于2019-08-29 12:14 / 1778人阅读

摘要：多列适用于除外的非替换块级元素，，元素语法列宽列数如果元素设置了多列，同时也设置了宽度，当元素宽度小于时，元素会减少列的个数，以适应元素宽度行数设置的是单位了适应元素宽度变为了设置或检索列与列之间的间隙。

多列 columns

适用于除table外的非替换块级元素，table cells，inline-block元素

语法：

columns: <"column-width"> <"column-count">;  
/* column-width 列宽   column-count 列数 */

如果元素设置了多列，同时也设置了宽度，当元素宽度小于columnWidth * columnCount + columnGap时，元素会减少列的个数，以适应元素宽度

.test {
    columns:210px 3;
    width: 500px;
}
/* 500 < 210*3 ,行数设置的是 3 单位了适应元素宽度变为了2 */

column-gap

设置或检索列与列之间的间隙。不允许负值。

.test{
    columns:210px 3;
    column-gap: 30px;
}

效果如下：

column-rule

设置或检索对象的列与列之间的边框。

语法：

column-rule：<" column-rule-width "> || <" column-rule-style "> || <" column-rule-color ">
/* 与border类似  */

边框在列间隙的中间，如果边框宽度大于间隙宽度，那么边框会覆盖内容。

.test {
    columns: 210px 3;
    column-gap: 20px;
    column-rule: 30px solid green;
}

效果如下：

column-span

设置或检索对象元素是否横跨所有列

取值：

column-span: all;  /* 横跨所有列 */
column-span: none;  /* 不横跨 */

.test {
    columns: 210px 3;
    column-gap: 20px;
    column-rule: 30px solid green;
    column-span: all;
    -moz-column-gap: 20px;
    -moz-column-rule: 30px solid green;
    -moz-column-span: all;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 30px solid green;
    -webkit-column-span: all;
}

.test div{
    background-color: yellow;
}

效果如下：

column-fill

设置或检索所有列的高度是否统一

取值：

column-span: auto;  /* 列高度自适应内容 */
column-span: balance;  /* 所有列的高度以其中最高的一列统一  */

column-break-before

设置或检索对象之前是否断行

取值：

column-break-before: auto; /*既不强迫也不禁止在元素之前断行并产生新列*/ 
column-break-before: always; /*总是在元素之前断行并产生新列*/
column-break-before: avoid; /*避免在元素之前断行并产生新列 */

.test{
    -moz-column-count:4;
    -moz-column-gap:20px;
    -moz-column-rule:3px solid #090;
    -webkit-column-count:4;
    -webkit-column-gap:20px;
    -webkit-column-rule:3px solid #090;
    column-count:4;
    column-gap:20px;
    column-rule:3px solid #090;
}

.test div{
    -moz-column-break-before:always;
    -webkit-column-break-before:always;
    column-break-before:always;
}

效果如下：

column-break-after

设置或检索对象之后是否断行

取值：

column-break-after: auto; /*既不强迫也不禁止在元素之后断行并产生新列 */ 
column-break-after: always; /*总是在元素之后断行并产生新列*/
column-break-after: avoid; /*避免在元素之后断行并产生新列*/

与 column-break-before 同理

GPU云服务器云服务器多列数据多列重复数据 extjs 多列分组表格占多列html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111768.html

css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

kun_jian 2019-08-01 15:45 评论0 收藏0
水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定

摘要：包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中，比较特殊。 2018.05.29 居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素、绝对定位的居中。为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。目录：第一...

waterc 2019-08-29 15:32 评论0 收藏0