垂直分割
5 分
垂直拆分 区块将内容排列为两个并排的列。它们适用于比较、带有辅助信息的布局，或在解释旁边呈现代码。
Syntax（语法）
您可以使用 Markdown 或 MDX 添加此组件。
:::::VerticalSplit{layout="middle"}
::::VerticalSplitItem
Left content.
::::
::::VerticalSplitItem
Right content.
::::
:::::Vertical Split 区块支持三种布局选项：
- 左，创建更宽的左侧列。
- 中间，创建两个同等大小的列。
- 正确，创建更宽的右侧列。
每种布局都需要恰好两个 VerticalSplitItem 区块。
MDX 示例
以下示例展示三个可用的布局选项。
等宽列（中间）
<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>左侧加宽布局（左）
<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>右侧加宽布局（正确）
<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>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.