---
title: 垂直分割
slug: docs/cn/_xng3a5Ky67w8Vr8uFdF6
createdAt: 2026-06-05T14:43:33.191Z
---

[垂直拆分](docId\:pHDoGgPbedzuh9LmEbU8R) 区块将内容排列为两个并排的列。它们适用于比较、带有辅助信息的布局，或在解释旁边呈现代码。

## Syntax（语法）

您可以使用 Markdown 或 MDX 添加此组件。

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<VerticalSplit layout="middle">
  <VerticalSplitItem>
    Left content.
  </VerticalSplitItem>
  <VerticalSplitItem>
    Right content.
  </VerticalSplitItem>
</VerticalSplit>
```
:::
::::

Vertical Split 区块支持三种布局选项：

- `左`，创建更宽的左侧列。
- `中间`，创建两个同等大小的列。
- `正确`，创建更宽的右侧列。

每种布局都需要恰好两个 `VerticalSplitItem` 区块。

## MDX 示例

以下示例展示三个可用的布局选项。

### 等宽列（`中间`）

```javascript
<VerticalSplit layout="middle">
  <VerticalSplitItem>

  ### Left Column

  This column takes up equal space with the right column.

  </VerticalSplitItem>
  <VerticalSplitItem>

  ### Right Column

  Perfect for comparing features, showing before/after, or code + explanation.

  </VerticalSplitItem>
</VerticalSplit>
```

### 左侧加宽布局（`左`）

```javascript
<VerticalSplit layout="left">
  <VerticalSplitItem>

  ### Main Content

  The left column is wider — use this when the left side has the primary content and the right side has supplementary info.

  </VerticalSplitItem>
  <VerticalSplitItem>

  <hint type="info">
  This sidebar provides extra context.
  </hint>

  </VerticalSplitItem>
</VerticalSplit>
```

### 右侧加宽布局（`正确`）

```javascript
<VerticalSplit layout="right">
  <VerticalSplitItem>

  **Quick links:**
  - [Tabs](/tabs)
  - [Tables](/tables)

  </VerticalSplitItem>
  <VerticalSplitItem>

  ### Detailed Explanation

  The right column is wider — use this when the right side has the primary content.

  </VerticalSplitItem>
</VerticalSplit>
```