CSS: two-column ​

div[class~="instui-two-column"] — 两栏布局，包含左右内容区域。

✅ 何时使用两栏布局：

  • 你有两个重要性大致相同的内容区域

  • 需要并排比较或对照两组内容

  • 构建在移动端会垂直堆叠的响应式布局 🚫 在以下情况下不要使用两栏布局：

  • 一列主导页面 — 应改用不对称布局

  • 内容不适合并排展示

无障碍 ​

  • 确保在窄视口上两列都可感知且可用
  • 使用语义地标（例如 <section>）来包裹列内容
  • 保持列间有足够的间距和对比度

用法 ​

css
@import "@pantoken/plugin-layouts/layouts.css";

部件 ​

部件描述
.instui-divider列之间的可选视觉分隔线。
.instui-left左列内容区域。
.instui-right右列内容区域。

状态 ​

状态描述
:optional—

条件 ​

类型查询描述
media(max-width: 768px)—

消耗代币 ​

Token类型值
--instui-color-border——
--instui-space-large——
--instui-space-medium——

相关 ​