css3多列布局之columns属性设置列宽和列数

原创 国哥笔记  2018-11-12 20:11  阅读 643 views 次

columns属性定义及用法

在css中,columns属性是用来定义多列布局中列宽和列数,是一个速记属性,它可以把column-width、column-count两个属性定义在一个声明中。

columns属性有两个属性值,以空格分隔,第一个属性值设置的是列宽,等同于column-width属性;第二个属性值设置的是列数,等同于column-count属性;两个属性值可以省略其中之一,比如:columns: 100px; 、columns: 3; 也是可以的。如果两个属性值都不省略(columns: 100px 3;),这下问题就来了,最终的显示效果取决于谁呢?这得看实际应用了,请接着往下看......

columns属性语法格式

css语法:columns:column-width column-count;(例:columns:50px 3;)
JavaScript语法:object.style.columns="100px 3";

columns属性值说明

  • column-width:列的宽度(实际的宽度可能不等);
  • column-count:列数;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3多列布局之columns属性设置列宽和列数</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;margin-top:10px;column-rule-style:solid;}
.a{columns:100px;}
.b{columns:4;}
.c{columns:100px 4;}
.d{columns:10px 4;}
</style>
</head>
<body>
<div class="a">columns:100px;演示:>=100px最多可以分成3列。这是为了演示效果多写的</div>
<div class="b">columns:4;演示:分成4列。这是为了演示效果多写的,呵呵呵呵呵呵呵呵</div>
<div class="c">columns:100px 4;演示::>=100px最多可以分成3列。这是为了演示效果多写的</div>
<div class="d">columns:10px 4;演示:分成4列。这是为了演示效果多写的,哈哈哈哈哈哈啊哈哈哈哈</div>
</body>
</html>

运行结果:

css3多列布局之columns属性设置列宽和列数

分析:columns属性最终定义的列数是取决于谁?

当然,只有一个属性值的时候就取决于该属性值;如果有两个属性值,列数取决于定义列数少的那个。比如:第一个参数定义的宽度最多可以分成4列,而第二个参数定义的列为3,那么最终的结果被分为3列。

多列布局相关属性

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

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

发表评论


表情