多列 - Apifox Markdown 语法

通过多列显示将文本或内容。

示例效果

第 1 列
这里是第 1 列内容

第 2 列
这里是第 2 列内容

第 3 列
这里是第 3 列内容

代码：

<Columns>
  <Column>
    **第 1 列**
    这里是第 1 列内容
  </Column>
  <Column>
    **第 2 列**
    这里是第 2 列内容
  </Column>
  <Column>
    **第 3 列**
    这里是第 3 列内容
  </Column>
</Columns>

列内容遵循 markdown 语法。

定义宽度

第 1 列
这里是第 1 列内容,宽度20%

第 2 列
这里是第 2 列内容,宽度20%

第 3 列
这里是第 3 列内容,宽度300px

代码：

<Columns>
  <Column width="20%">
    **第 1 列**
    这里是第 1 列内容,宽度20%
  </Column>
  <Column width="20%">
    **第 2 列**
    这里是第 2 列内容,宽度20%
  </Column>
  <Column width={300}>
    **第 3 列**
    这里是第 3 列内容,宽度300px
  </Column>
</Columns>

通过 class 引用 Tailwind CSS 样式

多列组件支持使用 TailwindCSS 来自定义样式，Columns和Column都可以通过class属性添加 TailwindCSS 样式。

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

代码：

<Columns>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column class="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

通过 style 直接定义样式

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

代码：

<Columns>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
    <Column style="background-color: #f0f0f0; padding: 10px;">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook
        
        ![](https://api.apifox.com/api/v1/projects/4444182/resources/439706/image-preview)
    </Column>
</Columns>

参数说明

Column

width

number

可选

宽度，支持百分比和px，如“30%”，“240”，默认自动多列等分计算

class

string

可选

为HTML元素分配一个或多个类名，支持 Tailwind CSS

style

string

可选

内联样式属性，允许直接定义CSS样式

多列

示例效果#

定义宽度#

通过 class 引用 Tailwind CSS 样式#

通过 style 直接定义样式#

参数说明#

示例效果

定义宽度

通过 class 引用 Tailwind CSS 样式

通过 style 直接定义样式

参数说明