HTMLCSS学习笔记(十七)-- css3-多列

css3-多列

多列布局类似报纸或杂志中的排版方式,主要用以控制大篇幅文本。


多列属性

  1. column-count

属性规定元素应该被分隔的列数
适用于:除table外的非替换块级元素, table cells, inline-block元素

  1. column-gap

属性规定列之间的间隔大小

  1. column-rule

设置或检索对象的列与列之间的边框。复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。

  1. column-fill

设置或检索对象所有列的高度是否统一
auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一

  1. column-span

设置或检索对象元素是否横跨所有列。
none:不跨列
all:横跨所有列

  1. column-width

设置或检索对象每列的宽度

  1. columns

设置或检索对象的列数和每列的宽度。复合属性
<' column-width '> || <' column-count '>

注:Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。

多列案例(瀑布流)

image

 
 
 
 
本文转自知乎号千锋HTML5学院

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浅谈CSS3多列布局 相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: 现在,强大的CSS3为我...
    haileym阅读 2,311评论 0 0
  • 通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 浏览器支持 Internet Explore...
    LorenSLJ阅读 599评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • columns属性 概念:设置或检索对象的列数和每列的宽度,复合属性 语法:columns: <'columns-...
    陈裔松的技术博客阅读 304评论 0 0
  • columns(设置或检索对象的列数和每列的宽度,复合属性)columns:<' column-width '> ...
    Leophen阅读 120评论 0 0