6. 多列布局column

1. 多列布局column

多列布局column用于定义多列文本
属性：

column-count
column-gap
column-rule
column-rule-style
column-rule-width
column-rule-color
column-span
column-width

1.1 column-count

列数

div {column-count: 3; // 将元素中的文本均分3列
}

1.2 column-gap

列间隙

div{column-gap: 40px; // 列间隙为40px
}

1.3 column-rule

列之间的分隔线样式，类似border，是column-rule-style、 column-rule-width、 column-rule-color的合写

div {column-count: 3;column-gap: 20px;column-rule: 2px solid red; //  列间以实线分隔
}

1.4 column-span

规定元素应跨越多少列

div {column-count: 3;column-gap: 20px;column-rule: 2px solid red;
}
h2{column-span: 3 | all;  // h2标题横跨3列或者全列
}

6. 多列布局column相关推荐

文字的多列布局--column
转载于:https://www.cnblogs.com/ncuhwxiong/p/5912059.html
HTML5column属性布局页脚,利用column多列属性调整页面文字列布局
column多列属性 column-count:栏目数兼容性写法: CSS Code复制内容到剪贴板 -webkit-column-count:3 -moz-column-count:3 colum ...
ExtJS2.0实用简明教程 - Column列布局
Column列布局由Ext.layout.ColumnLayout类定义,名称为column.列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth ...
flex 瀑布流（多列样式column布局内容被截断）
<div class="recom_view"> <div class="recom"> 1 </div> <div ...
css3中的column属性实现多列布局和瀑布流布局
在css3中有新增column属性可以实现页面的排版,使得页面更加整洁,现在一一为大家介绍用法以及属性值. columns:用于设置元素的列宽和列数.它是column-width和column-cou ...
display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
css3弹性盒子、媒体查询、多列布局
css3 一.弹性盒子 <head lang="en"><meta name="viewport" content="width=d ...
CSS3-多列布局-伸缩盒布局-伸缩项目
多列布局-伸缩盒布局-伸缩项目 1 回顾 1.1 变换 transform ① 相关CSS属性 transform transform-origin transform-style perspecti ...

6. 多列布局column

1. 多列布局column

1.1 column-count

1.2 column-gap

1.3 column-rule

1.4 column-span

6. 多列布局column相关推荐

最新文章

热门文章