CSS 属性

CSS 属性column-span 确定一个元素可以跨越多少列。

跨度元素是跨越多列的元素。

属性值

CSS 属性 column-span 采用以下值之一:

  • none:元素不跨越多个列。

  • all:元素跨越所有列。

适用范围

所有流入的块级元素.

语法

column-span = none | all

CSS column-span: all 

在以下示例中，标题设置为跨越文章的所有列:

 <html>
<head>
<style> 
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      column-rule: 5px dashed red;
   }

   h1 {
      column-span: all;
      background-color: lightskyblue;
   }
</style>
</head>
<body>
   <p>根据<strong>column-span</strong>属性，元素跨越所有列:</p>

   <div class="multicol-col-rule">
      <p>早晨，从山坡上，从坪坝里，从一条条开着绒球花和太阳花的小路上，走来了许多小学生，有汉族的，有傣族的，有景颇族的，还有阿昌族和德昂族的。大家穿戴不同，来到学校，都成了好朋友。那鲜艳的服装，把学校打扮得绚丽多彩。同学们向在校园里欢唱的小鸟打招呼，向敬爱的老师问好，向高高飘扬的国旗敬礼。</p>
      <h1>标题跨越所有列</h1>
      <p>“当，当当！当，当当！”大青树上的铜钟敲响了。
上课了，不同民族的小学生，在同一间教室里学习。大家一起朗读课文，那声音真好听！这时候，窗外十分安静，树枝不摇了，鸟儿不叫了，蝴蝶停在花朵上，好像都在听同学们读课文。最有趣的是，跑来了两只猴子。这些山林里的朋友，是那样好奇地听着。下课了，大家在大青树下跳孔雀舞、摔跤、做游戏，招引来许多小鸟，连松鼠、山狸也赶来看热闹。
这就是我们的可爱的小学，一所边疆的小学。古老的铜钟，挂在大青树粗壮的枝干上。凤尾竹的影子，在洁白的粉墙上摇晃……</p>
   </div>
</body>
</html>