购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS3 多列

CSS3 多列
通过 CSS3,WEB开发人员能够轻松创建多个列来对文本进行布局,它是传统HTML网页中块状布局模式的有力扩充。
编辑:前端控 前端控 更新时间:2019-02-01 10:43:55

CSS3 多列

通过 CSS3的多列学习,您能够创建多个列来对文本进行布局,就像报纸那样

多列属性:

  • column-count

  • column-gap

  • column-rule

浏览器支持:


属性
                                                              浏览器支持
column-count

      

            

  需要前缀 -webkit-

          

    需要前缀 -moz-

          

  需要前缀 -webkit-

       
column-gap

      

            

  需要前缀 -webkit-

          

   需要前缀 -moz-

           

   需要前缀 -webkit-

       
column-rule

        

             

  需要前缀 -webkit-

          

   需要前缀 -moz-

           

    需要前缀 -webkit-

       

   

column-count属性

规定元素应该被分隔的列数

实例

p{
		column-count:3;
		-webkit-column-count:3; /* Safari and Chrome */
		-moz-column-count:3;/* Firefox */
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

column-gap 属性

规定列之间的间隔

实例

p{
		column-count:3;
		-webkit-column-count:3; /* Safari and Chrome */
		-moz-column-count:3;/* Firefox */
		column-gap:30px;
		-webkit-column-gap:30px; /* Safari and Chrome */
		-moz-column-gap:30px;/* Firefox */
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

column-rule 属性

设置列之间的宽度、样式和颜色规则

实例

p{
		column-count:3;
		-webkit-column-count:3; /* Safari and Chrome */
		-moz-column-count:3;/* Firefox */
		column-rule:3px outset pink;
		-webkit-column-rule:3px outset pink;/* Safari and Chrome */
		-moz-column-rule:3px outset pink;/* Firefox */
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 29.jpg

CSS3多列属性


属性描述
column-count指定元素应该被分割的列数。
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写



网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号