css3 多列属性 column-count column-gap column-rule

最新推荐文章于 2022-11-04 09:53:28 发布

公有云私有云

最新推荐文章于 2022-11-04 09:53:28 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/81081196

版权

1、分隔列
把一段文本拆分成几列
column-count:规定元素被分隔的列数
2、列间隔
设置列与列之间的距离
column-gap:间隔;
3、列规则
可以在列与列之间设置一条间隔线，列规则可以设置间隔线的样式、颜色、粗细
column-rule:大小样式颜色;

column-rule-width:
column-rule-style:
column-rule-color:

<!DOCTYPE html>
<html>
 <head>
  <title> 多列 </title>
  <meta charset="utf-8" />
  <style>
	div.content{
		width:450px;
		border:1px solid #e4393c;
		/*将当前内容分成3列*/
		-webkit-column-count:3;
		-webkit-column-gap:45px;
		-webkit-column-rule:1px solid #e4393c;
	}
  </style>
 </head>

 <body>
  <div class="content">
	中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国
  </div>
 </body>
</html>

1、IE10 以及 Opera 浏览器支持多列属性
2、FireFox 需使用前缀 -moz-
-moz-column-count:
   -moz-column-gap:
   -moz-column-rule:
3、Chrome 和 Safari
-webkit-column-count:
   -webkit-column-gap:
   -webkit-column-rule:

公有云私有云

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3 多列属性 column-count column-gap column-rule

1、分隔列把一段文本拆分成几列 column-count:规定元素被分隔的列数 2、列间隔设置列与列之间的距离 column-gap:间隔; 3、列规则可以在列与列之间设置一条间隔线，列规则可以设置间隔线的样式、颜色、粗细 column-rule:大小样式颜色; column-rule-wi...
复制链接

扫一扫