css3 column-fill属性设置填充列的方式笔记

原创 国哥笔记  2018-11-10 18:15  阅读 744 views 次

column-fill属性定义及用法

在css中,column-fill属性是用在使用了columns、column-count等属性设置了多列(多列布局)的元素中,其作用是控制元素分成几列后,里边的内容将怎样分配在各个列中。

column-fill属性的属性值可以是balance和auto,balance表示平衡模式,各个列的内容高度基本一致;auto表示自动分配,列的内容自动按顺序分布,各个列中内容的高度不一定相同,当列设置了高度尤为明显。

column-fill属性语法格式

  1. css语法:column-fill: balance / auto;
  2. JavaScript语法:object.style.columnFill="balance / auto";

column-fill属性值说明

  • balance:列长短平衡,浏览器将各列内容高度尽量保持一致;
  • auto:内容按顺序填充到各列中;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 column-count属性将文本拆分成几列笔记</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;height:100px;border:1px solid blueviolet;}
.balance{column-count:3;column-fill: balance;}.auto{column-count:3;column-fill: auto;}
</style>
</head>
<body>
<div class="balance">column-fill: balance;演示,这段文字将被拆分成三列,各个列的内容高度基本一致!</div>
<div class="auto">column-fill: auto;演示,这段文字将被拆分成三列,各个列的内容高度不一致!</div>
</body>
</html>

运行结果:

css3 column-fill属性设置填充列的方式笔记

非常相关
注意

column-fill属性在一些浏览器或早期版本的浏览器可能还不支持,需要添加一些前缀用于浏览器识别才能支持(如:-webkit-column-fill、 -ms-column-fill、-moz-column-fill等)。由于没有安装太多的浏览器在这就不测试了,有兴趣的朋友可以自己测试一下。

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/column-fill.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情