CSS3 column-span 属性

CSS3 column-span 属性是用于在多列布局中，控制元素是否要跨越多列来展示的属性。当设置元素的 column-span 属性为 all 时，元素会跨越多列来展示，此时元素的宽度会充满这些列。

语法

column-span: none|all|initial|inherit;

none：元素不跨列展示，这是默认值。
all：元素跨越多列展示。
initial：将属性设置为其默认值。
inherit：从父元素继承属性值。

注意事项

column-span 属性只对非浮动元素生效，对浮动元素无效。
column-span 属性只对处于多列布局中的元素生效，对于处于单列布局中的元素，此属性无效。
column-span 属性对于使用 display:flex 属性的元素同样无效。

实例展示

在下面的示例中，我们将一个 div 元素放在多列布局中，设置 column-span 属性为 all，来让这个元素跨越多列展示。

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{
         column-count: 3;
         column-gap: 40px;
      }

      .box{
         background-color: #ddd;
         padding: 20px;
         margin-bottom: 20px;
      }

      .span{
         column-span: all;
         background-color: #3498db;
         color: #fff;
         text-align: center;
         padding: 10px;
         font-size: 16px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="box">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      <div class="box span">This is a spanned element. It spans across multiple columns in the layout.</div>
      <div class="box">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
      <div class="box">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
   </div>
</body>
</html>

上述示例中，我们先设置了一个三列布局，每列的间距为 40px。接着，在其中一个元素 .span 上设置了 column-span 属性为 all，让它跨越了多列来展示。最终的效果如下图所示：

column-span展示效果图

总结

CSS3 column-span 属性是控制元素跨列展示的重要属性之一，可以让我们在多列布局中更加灵活地控制元素的展示方式。然而，在使用此属性时，需要注意它只对非浮动元素生效，也只对多列布局中的元素生效。

CSS3 column-rule-width 属性 CSS3 column-width 属性