CSS3 布局 - columns 属性

1. 简介

在 CSS 中，columns 属性是一个简写属性，用于同时设置 column-width 和 column-count 属性。这个属性可以将文本内容分成多列显示，类似于报纸或杂志的排版方式，使长文本更加易于阅读。

2. columns 属性详解

columns 属性定义了元素内容的列数和每列的宽度。它是 column-width 和 column-count 的简写形式。

2.1 语法

.element {
  columns: <column-width> || <column-count>;
}

其中：

  • &lt;column-width&gt; 是每列的理想宽度，可以是长度值（如 px、em 等）
  • &lt;column-count&gt; 是期望的列数，可以是整数

2.2 取值说明

取值 描述
&lt;column-width&gt; 每列的理想宽度，浏览器会根据可用空间调整实际列宽
&lt;column-count&gt; 期望的列数，浏览器会根据可用空间调整实际列数
auto 默认值，表示使用浏览器默认设置

2.3 工作原理

当同时指定了 &lt;column-width&gt; 和 &lt;column-count&gt; 时，浏览器会：

  1. 首先尝试使用指定的列数
  2. 然后根据容器宽度和列数计算每列的实际宽度
  3. 如果计算出的宽度小于指定的最小列宽，则会减少列数以保证每列至少有指定的宽度
  4. 如果容器宽度不足以显示至少一列，则会显示为单列

3. 示例代码

3.1 基本使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>columns 属性示例</title>
  <style>
    .columns-container {
      columns: 3 200px;
      column-gap: 20px;
      column-rule: 1px solid #ddd;
      padding: 20px;
      background-color: #f5f5f5;
      max-width: 800px;
    }
    
    h2 {
      column-span: all;
      margin-top: 0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="columns-container">
    <h2>CSS columns 属性示例</h2>
    <p>CSS columns 属性可以将文本内容分成多列显示，类似于报纸或杂志的排版方式。这种排版方式可以使长文本更加易于阅读，特别是在宽屏幕设备上。</p>
    <p>columns 属性是一个简写属性，用于同时设置 column-width 和 column-count 属性。column-width 指定每列的理想宽度，column-count 指定期望的列数。</p>
    <p>当同时指定了列宽和列数时，浏览器会根据可用空间自动调整实际的列数和列宽，以达到最佳的显示效果。</p>
    <p>除了 columns 属性外，还有其他相关的属性，如 column-gap（指定列间距）、column-rule（指定列分隔线）和 column-span（指定元素是否跨越多列）。</p>
    <p>使用 columns 属性可以创建更加美观和易于阅读的布局，特别是对于包含大量文本的页面，如文章、博客帖子、新闻报道等。</p>
  </div>
</body>
</html>

3.2 不同取值示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>columns 不同取值示例</title>
  <style>
    .columns-container {
      margin-bottom: 30px;
      padding: 20px;
      background-color: #f0f0f0;
      max-width: 800px;
    }
    
    /* 示例 1: 只指定列数 */
    .example1 {
      columns: 2;
      column-gap: 20px;
    }
    
    /* 示例 2: 只指定列宽 */
    .example2 {
      columns: 150px;
      column-gap: 20px;
    }
    
    /* 示例 3: 同时指定列数和列宽 */
    .example3 {
      columns: 200px 3;
      column-gap: 20px;
    }
    
    h3 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <h2>columns 不同取值示例</h2>
  
  <h3>示例 1: columns: 2（只指定列数）</h3>
  <div class="columns-container example1">
    <p>这是一个只指定了列数的示例。浏览器会根据容器宽度和指定的列数自动计算每列的宽度。当容器宽度变化时，每列的宽度也会相应变化。</p>
    <p>这种方式适用于需要固定列数的场景，如在不同屏幕尺寸下保持相同的列数。</p>
  </div>
  
  <h3>示例 2: columns: 150px（只指定列宽）</h3>
  <div class="columns-container example2">
    <p>这是一个只指定了列宽的示例。浏览器会根据容器宽度和指定的列宽自动计算实际的列数。当容器宽度变化时，列数也会相应变化。</p>
    <p>这种方式适用于需要固定列宽的场景，如在不同屏幕尺寸下保持相同的列宽，自动调整列数。</p>
  </div>
  
  <h3>示例 3: columns: 200px 3（同时指定列数和列宽）</h3>
  <div class="columns-container example3">
    <p>这是一个同时指定了列宽和列数的示例。浏览器会尝试使用指定的列数，同时保证每列至少有指定的宽度。当容器宽度不足以显示指定的列数时，会减少列数。</p>
    <p>这种方式适用于需要同时控制列宽和列数的场景，浏览器会根据可用空间自动调整以达到最佳效果。</p>
  </div>
</body>
</html>

4. 布局图示

4.1 基本布局示意图

+-------------------------+-------------------------+
|                         |                         |
|  第一列内容              |  第二列内容              |
|  Lorem ipsum dolor sit  |  amet, consectetur       |
|  adipisicing elit, sed   |  do eiusmod tempor       |
|  tempor incididunt ut    |  incididunt ut labore    |
|  labore et dolore magna  |  et dolore magna aliqua. |
|  aliqua.                 |                         |
|                         |                         |
+-------------------------+-------------------------+
|                         |
|  列间距 (column-gap)     |
|                         |
+-------------------------+-------------------------+

4.2 响应式布局变化

4.2.1 宽屏幕

+-------------------------+-------------------------+-------------------------+
|                         |                         |                         |
|  第一列内容              |  第二列内容              |  第三列内容              |
|                         |                         |                         |
+-------------------------+-------------------------+-------------------------+

4.2.2 中等屏幕

+-------------------------+-------------------------+
|                         |                         |
|  第一列内容              |  第二列内容              |
|                         |                         |
+-------------------------+-------------------------+

4.2.3 窄屏幕（移动端）

+-----------------------------------------+
|                                         |
|  单列内容                                |
|                                         |
+-----------------------------------------+

5. 实际应用

5.1 文章布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章布局</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .article {
      columns: 250px 3;
      column-gap: 30px;
      column-rule: 1px solid #ddd;
    }
    
    h1 {
      column-span: all;
      text-align: center;
      margin-bottom: 30px;
    }
    
    h2 {
      column-span: all;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    
    p {
      margin-bottom: 15px;
    }
    
    img {
      max-width: 100%;
      height: auto;
      margin: 15px 0;
      break-inside: avoid;
    }
    
    .caption {
      font-size: 0.9em;
      color: #666;
      text-align: center;
      margin-bottom: 20px;
    }
    
    @media (max-width: 768px) {
      .article {
        columns: 200px 2;
      }
    }
    
    @media (max-width: 480px) {
      .article {
        columns: 1;
      }
    }
  </style>
</head>
<body>
  <h1>CSS columns 属性在文章布局中的应用</h1>
  
  <div class="article">
    <p>CSS columns 属性可以将文章内容分成多列显示，类似于报纸或杂志的排版方式。这种排版方式可以使长文本更加易于阅读，特别是在宽屏幕设备上。</p>
    
    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20office%20space%20with%20people%20working&image_size=landscape_16_9" alt="现代办公空间">
    <div class="caption">现代办公空间示例</div>
    
    <p>使用 columns 属性时，可以同时指定列数和每列的宽度，浏览器会根据可用空间自动调整实际的列数和列宽。例如，在上面的代码中，我们设置了 columns: 250px 3，表示每列的理想宽度为 250px，期望的列数为 3。</p>
    
    <p>除了 columns 属性外，还可以使用其他相关的属性来控制列布局，如 column-gap（指定列间距）、column-rule（指定列分隔线）和 column-span（指定元素是否跨越多列）。</p>
    
    <h2>响应式设计</h2>
    
    <p>在响应式设计中，可以使用媒体查询来根据屏幕尺寸调整 columns 属性的值。例如，在上面的代码中，我们在屏幕宽度小于 768px 时将列数调整为 2，在屏幕宽度小于 480px 时将列数调整为 1。</p>
    
    <p>这种方式可以确保在不同屏幕尺寸下都能获得最佳的阅读体验，在宽屏幕上显示多列，在窄屏幕上自动调整为单列。</p>
    
    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=responsive%20web%20design%20concept&image_size=landscape_16_9" alt="响应式设计概念">
    <div class="caption">响应式设计概念示意图</div>
    
    <p>使用 columns 属性创建多列布局时，需要注意以下几点：</p>
    <ul>
      <li>columns 属性只适用于块级元素</li>
      <li>子元素的 break-inside 属性可以控制元素是否在列中断开</li>
      <li>column-span 属性可以使元素跨越多列</li>
      <li>在使用 columns 属性时，应该考虑文本的可读性，不要设置过多的列或过窄的列宽</li>
    </ul>
  </div>
</body>
</html>

5.2 产品列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品列表</title>
  <style>
    .product-list {
      columns: 200px 4;
      column-gap: 20px;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    .product {
      break-inside: avoid;
      margin-bottom: 20px;
      padding: 15px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .product img {
      max-width: 100%;
      height: auto;
      border-radius: 3px;
      margin-bottom: 10px;
    }
    
    .product h3 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 1.1em;
    }
    
    .product p {
      margin-bottom: 15px;
      font-size: 0.9em;
      color: #666;
    }
    
    .price {
      font-weight: bold;
      color: #e74c3c;
      font-size: 1.1em;
    }
    
    @media (max-width: 1024px) {
      .product-list {
        columns: 200px 3;
      }
    }
    
    @media (max-width: 768px) {
      .product-list {
        columns: 180px 2;
      }
    }
    
    @media (max-width: 480px) {
      .product-list {
        columns: 1;
      }
    }
  </style>
</head>
<body>
  <h2>产品列表</h2>
  <div class="product-list">
    <div class="product">
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smartphone%20product%20photo&image_size=square" alt="智能手机">
      <h3>智能手机</h3>
      <p>最新款智能手机，配备高性能处理器和高清摄像头。</p>
      <div class="price">¥4999</div>
    </div>
    
    <div class="product">
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=laptop%20computer%20product%20photo&image_size=square" alt="笔记本电脑">
      <h3>笔记本电脑</h3>
      <p>轻薄便携的笔记本电脑，适合商务人士和学生使用。</p>
      <div class="price">¥6999</div>
    </div>
    
    <div class="product">
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=wireless%20headphones%20product%20photo&image_size=square" alt="无线耳机">
      <h3>无线耳机</h3>
      <p>高品质无线耳机，提供出色的音质和舒适的佩戴体验。</p>
      <div class="price">¥1299</div>
    </div>
    
    <div class="product">
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smart%20watch%20product%20photo&image_size=square" alt="智能手表">
      <h3>智能手表</h3>
      <p>多功能智能手表，可监测健康数据和接收通知。</p>
      <div class="price">¥1999</div>
    </div>
    
    <div class="product">
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=tablet%20device%20product%20photo&image_size=square" alt="平板电脑">
      <h3>平板电脑</h3>
      <p>高清屏幕平板电脑，适合娱乐和工作使用。</p>
      <div class="price">¥3999</div>
    </div>
    
    <div class="product">
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=bluetooth%20speaker%20product%20photo&image_size=square" alt="蓝牙音箱">
      <h3>蓝牙音箱</h3>
      <p>便携式蓝牙音箱，提供出色的音质和长续航。</p>
      <div class="price">¥899</div>
    </div>
  </div>
</body>
</html>

6. 浏览器兼容性

浏览器 支持版本
Chrome 50+
Firefox 52+
Safari 9+
Edge 12+
IE 10+ (部分支持)

7. 总结

  • columns 属性是 column-width 和 column-count 的简写属性，用于创建多列布局
  • 可以同时指定列宽和列数，浏览器会根据可用空间自动调整
  • 适用于长文本内容的排版，如文章、博客帖子等
  • 与 column-gap、column-rule 和 column-span 等属性配合使用，可以创建更加美观的多列布局
  • 在响应式设计中，可以使用媒体查询根据屏幕尺寸调整列数和列宽
  • 子元素的 break-inside 属性可以控制元素是否在列中断开

8. 练习

  1. 基础练习：创建一个包含长文本的容器，使用 columns 属性将其分成 3 列显示。

  2. 进阶练习：创建一个产品列表，使用 columns 属性和 break-inside: avoid 确保每个产品卡片不会在列中断开。

  3. 挑战练习：结合 columns 属性和媒体查询，创建一个在不同屏幕尺寸下有不同列数的响应式布局。

9. 扩展阅读

通过本教程，你已经了解了 columns 属性的基本用法和实际应用。在实际项目中，合理使用 columns 属性可以创建更加美观和易于阅读的多列布局，特别是对于包含大量文本的页面。

« 上一篇 117-grid-auto-flow-property 下一篇 » 119-column-count-property
↑