css3 column-span属性设置元素跨多少列笔记

原创 国哥笔记  2018-11-12 12:01  阅读 767 views 次

column-span属性定义及用法

在css中,column-span属性是用在多列布局中,用来设置多列布局中的元素跨多少列。当在多列布局中有多个元素,我们需要将其中的一个或几个元素设置为占多列的时候,就可以使用该属性;

column-span属性值可以是none(默认,有的地方写的是1,效果一样)和all。为none时:元素只占一列。为all时:元素跨所有列,即占据所有列。但要注意的是,必须是块级元素,不然是不可以跨列的,所以如果不是块级元素设置all是不起作用的,就算是inline-block元素也不起作用。

column-span属性语法格式

  1. css语法:column-span: none / all;(例:column-span: all;)
  2. JavaScript语法:object.style.columnSpan="number / all";

column-span属性值说明

  • none:不跨列,只占一列(默认);
  • all:占所有列;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 column-span属性设置元素跨多少列笔记</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;margin-top:10px;: ;}
.none ,.all{column-count:3;}
.none h3{column-span:none;}
.all h3{column-span:all;}
</style>
</head>
<body>
<div class="none "><h3>column-span:none;演示</h3>column-span:none;:不跨列。这是为了演示效果多写的</div>
<div class="all"><h3>column-span:all;演示</h3>column-span:all;:跨所有列。这是为了演示效果多写的</div>
</body>
</html>

运行结果:

css3 column-span属性设置元素跨多少列笔记

温馨提示

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

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

发表评论


表情