CSS - column-span 属性

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

语法

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

属性值

值	描述
none	元素跨越一列。
all	元素跨越所有列。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS 列跨度属性示例

以下示例说明了使用不同值的columns-span属性。

使用 none 值的列跨度属性

要让元素只跨越一列，我们使用none值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      h3 {
         column-span: none;
         padding: 3px;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-span property
   </h2>
   <p>
   <strong>
      column-span: None
   </strong> 
      (The element spans across one column)
   </p>
   <div class="multicol-col-rule">
      <p>
         <h3>
            About TutorialsPoint Company
         </h3>
            TutorialsPoint is a widely used online learning
            platform offering comprehensive resources on 
            diverse subjects, including programming, web
            development, data science, and more. It provides
            free, user-friendly tutorials, guides, and courses
            tailored to learners of all levels. Each topic
            features clear explanations, interactive examples,
            and practical exercises to enhance understanding.
            With a focus on self-paced learning, TutorialsPoint
            aims to make complex concepts accessible and 
            manageable. Its extensive library and structured
            content support students, professionals, and 
            hobbyists in expanding their skills and knowledge
            efficiently and effectively, making it a 
            valuable tool for anyone looking to learn new
            technologies and techniques.
      </p>
   </div>
</body>

</html>

使用 all 值的列跨度属性

要让元素跨越所有现有的列，我们使用all值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      h3 {
         column-span: all;
         padding: 3px;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-span property
   </h2>
   <p>
   <strong>
      column-span: All
   </strong> 
      (The element spans across all columns)
   </p>
   <div class="multicol-col-rule">
      <p>
         <h3>
            About TutorialsPoint Company
         </h3>
            TutorialsPoint is a widely used online learning
            platform offering comprehensive resources on
            diverse subjects, including programming, web
            development, data science, and more. It provides
            free, user-friendly tutorials, guides, and courses
            tailored to learners of all levels. Each topic
            features clear explanations, interactive examples,
            and practical exercises to enhance understanding.
            With a focus on self-paced learning, TutorialsPoint
            aims to make complex concepts accessible and
            manageable. Its extensive library and structured
            content support students, professionals, and
            hobbyists in expanding their skills and knowledge
            efficiently and effectively, making it a
            valuable tool for anyone looking to learn new
            technologies and techniques.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
column-span	50.0	10.0	71.0	9.0	37.0

css_properties_reference.htm

打印页面