CSS3多列布局

  1. columns属性是一个复合属性——列宽(column-width)和列数(column-count),可以同时定义多列的列数和每列的列宽。
    columns: <column-width> || <column-count>
  • <column-width>:定义多列种每列的宽度。
  • <column-count>:定义多列中的列数。
  1. column-width属性类似于给列定义一个最小宽度(min-width)。
    column-width: auto | <length>
  • auto:默认值,如果值为auto或者没有显示设置值时,元素多列的列宽将有其他属性来决定。
  • <length>:使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能时正值,不能为负值。
    column-width单独使用时,当容器超出列宽时,会以多列显示,反之容器宽度小与设置的列宽时,容器将只显示为一列。
  1. column-count属性主要用来给元素指定想要的列数和允许的最大列数。
    column-count: auto | <integer>
  • auto:默认值,表示元素只有一列,其主要依靠浏览器计算自动设置。
  • <integer>:正整数值,主要用来定义元素的列数,取值为大于0的整数,负值无效。
    列数=(容器宽度-间距)/列间距
    浏览器对所求列数的值是去余取整,且如果元素设置了列数,不管元素容器的宽度是多少或者间距多少,总是显示固定的列数。
  1. column-gap属性类似于盒模型中的margin一样,主要用来设置元素分列的列间距,其只能设置列与列之间的间距。
    column-gap: normal | <length>
  • normal:默认值,主要通过浏览器默认设置时行解析,一般情况下,normal值相当于1em。
  • <length>:由浮点数字和单位标识符组成的长度值,主要用来设置列与列之间的距离,常用px、em单位的任何整数值,其值不能为负值。
    column-gap可以用来改变相邻列之间距离,但在多列元素同时设置了column-width时,column-gap与column-width等参数之和大于多列元素总宽度时,会导致列被撑破,并将以当前列数减1的列数显示,此时列宽自动调节到适当的列宽。
  1. column-rule属性主要是用来定义列与列之间的边框宽度、边框样式和边框颜色,有些类似于常用的border属性,但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。
    column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>
  • column-rule-width:类似于border-width属性,主要用来定义列边框的宽度,其默认值为medium,该属性接受任意浮点数,但不接受负值。像border-width属性一样,可以使用款见此medium、thick和thin。
  • column-rule-style:此值类似于border-style属性,主要用来定义列边框样式,其默认值为none。该属性值与border-style属性值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
  • column-rule-color:此值类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。该属性接受所有的颜色。如果不希望显示颜色,也可以将其值设置为transparent(透明色)。
    column-rule-width增大并不会影响列的布局,其不占有任何空间位置。
    column-rule在Z轴上是介于background和content之间,当column-rule-width宽度增加到超过列与列的间距时,列边框就会自动消失。
  1. column-span属性主要用来定义一个分列元素中的子元素能跨多少列,有时需要一段内容或一个标题不进行分列,也就是横跨所有列,就可以用该属性实现。
    column-span: none | all
  • none:默认值,表示不跨越任何列。
  • all:跟none值正好相反,表示的是跨越所有列,并定位在列的Z轴之上。
  1. column-fill属性主要用来定义多列种每一列的高度是否统一。
    column-fill: auto | balance
  • auto:默认值,各列的高度随其内容的变化自动变化。
  • balance:各列的高度将会根据内容最多的一列的高度进行统一。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • 浅谈CSS3多列布局 相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: 现在,强大的CSS3为我...
    haileym阅读 2,229评论 0 0
  • columns属性 概念:设置或检索对象的列数和每列的宽度,复合属性 语法:columns: <'columns-...
    陈裔松的技术博客阅读 275评论 0 0
  • 定义列数column-count 在CSS3的多列布局中,我们可以使用column-count属性指定多列布局的列...
    挥剑斩浮云阅读 482评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,705评论 1 92
  • 一:css3多列布局 column-count:3; 内容有几列 column-gap:40px; 列于列之间...
    _小小苏_阅读 4,201评论 0 0