CSS 属性

CSS 属性 columns 是一个简写属性，用于设置显示元素内容时要使用的列数以及这些列的宽度。

columns 是以下属性的简写:

属性值

CSS 属性columns 指定为下面列出的一个或两个值（按任意顺序）:

  • <'column-width'> :指定为 <length> 值或关键字 auto。实际宽度可能更宽或更窄，以适应可用空间。请参阅column-width。

  • <'column-count'>:指定为 <integer> 值或关键字 auto。显示要显示元素内容的列数。请参阅column-count。

适用范围

除包装器框之外的所有块容器。

语法

columns = <'column-width'> || <'column-count'>

    CSS columns: <'column-count'> 

    在以下示例中，列简写属性用于将列数设置为3列，其中没有为column-width传递任何值:

    <html>
<head>
<style> 
   .multicol-col-rule {
      columns: 3;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>columns property</h1>

   <div class="multicol-col-rule">
      <p>天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！</p>
      <p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    CSS columns: auto 

    在下面的示例中，列简写属性用于将列数设置为 auto，column-width: 10rem:

    <html>
<head>
<style> 
   .multicol-col-rule {
      columns: 10rem auto;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>columns property</h1>

   <div class="multicol-col-rule">
      <p>天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！</p>
      <p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    CSS columns: <'column-width'> 

    在以下示例中，列简写属性用于根据column-width值设置列数，没有为column-count指定直接值:

    <html>
<head>
<style> 
   .multicol-col-rule {
      columns: 15em;
   }

   p {
      background-color: bisque;
   }
</style>
</head>
<body>
   <h1>columns property</h1>

   <div class="multicol-col-rule">
      <p>天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！
      孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
   </div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20