前提要素

[!示例]
原文链接如下：https://efemkay.github.io/obsidian-modular-css-layout/
这里内容繁多，我们挑一些精要的讲讲吧！！！

Multi Column

基本分栏语法

[!示例]
该 css 的基本语法本质上就是将多个子 callout 嵌套在 > [!multi-column] 这个主 callout 下实现分栏效果，可在 > [!multi-column] 后加 |center-fixed/right-fixed/left-fixed 来控制居中或左右对齐

代码示例：

> [!multi-column]
>
>> [!note] 第一栏标题
>> 第一栏内容
>
>> [!warning] 第二栏标题
>> 第二栏内容
>
>> [!summary] 第三栏标题
>> 第三栏内容

[!multi-column]

[!note] 第一栏标题
第一栏内容

[!warning] 第二栏标题
第二栏内容

[!summary] 第三栏标题
第三栏内容

[!示例]

如需自定义分栏宽度，可在子 callout 类型后加 |min-0 以规定最小栏宽，或加 |wide-2/wide-3/wide-4/wide-5 设置默认栏宽（200px）2-5 倍不等的栏宽

代码示例：

> [!multi-column]
>
>> [!note|wide-3] 第一栏标题
>> 第一栏内容
>
>> [!warning|wide-1] 第二栏标题
>> 第二栏内容
>
>> [!summary|wide-1] 第三栏标题
>> 第三栏内容

[!multi-column]

[!note|wide-3] 第一栏标题
第一栏内容

[!warning|wide-1] 第二栏标题
第二栏内容

[!summary|wide-1] 第三栏标题
第三栏内容

侧边批注语法

[!示例]
这里的功能仅仅在==阅读模式==下可见正解
如需利用 callout 实现类 word 侧边批注的效果，可在 callout 类型后加 |left/right-small/medium/large，其中 left/right 元数据控制批注框是靠右还是靠左；small/medium/large 元数据控制批注框的大小，可加可不加；callout 一定要放在需要批注的文字的上方，之间空一行

正文:

[!note|right-small]
批注内容

需要批注的文字

无边框 callout 语法

[!示例]
如需实现无边框 callout 的效果，可将主 callout 类型设置为 [!blank] 或 [!blank-container]

代码示例：

> [!blank]
> 无边框callout内容文字，注意这段文字实际上还是包裹在callout中，只是渲染出来没有这样的效果

[!blank]
无边框callout内容文字，注意这段文字实际上还是包裹在callout中，只是渲染出来没有这样的效果

无序列表分栏语法

[!示例]
如需实现无序列表的分栏，可在最高级列表项后空一格接 #mcl/list-grid（注意有的辅助排版插件会自动在 list 和 - 之间添加空格，需要删掉空格否则不会渲染样式，下同），如在最后加上 -wide 字样，则分栏默认最小宽度为 350px，否则默认为 250px，每行容许的分栏数由分栏的最小宽度和笔记的宽度决定，下同，除此之外亦可通过或在文档属性的 cssclass 中申明实现，但因这样会影响整篇笔记，不够灵活，故此文不做推荐，有意者可见官方文档，下同

代码示例：

- 第一军 #mcl/list-grid
    - 第一师
    - 第二师
    - 第三师
        - 直属军部
    - 炮兵旅
- 第二军
    - 第四师
    - 第五师
    - 第六师

• 第一军 #mcl/list-grid
  • 第一师
  • 第二师
  • 第三师
    • 直属军部
  • 炮兵旅
• 第二军
  • 第四师
  • 第五师
  • 第六师

[!示例]
list-card 可实现类卡片视图，另外最高级列表项似乎必须是小标题，其他均与 list-grid 同

代码示例：

- #### 第一军 #mcl/list-card
    - 第一师
    - 第二师
    - 第三师
        - 直属军部
    - 炮兵旅
- #### 第二军
    - 第四师
    - 第五师
    - 第六师

• 第一军 #mcl/list-card

  • 第一师
  • 第二师
  • 第三师
    • 直属军部
  • 炮兵旅

• 第二军

  • 第四师
  • 第五师
  • 第六师

Gallery Cards

[!示例]
这列给一个没有标题的==画廊卡片==

示例代码：

> [!blank-container|no-margin gallery] Title
>
> *图片缺失：露西亚.png*
> *图片缺失：芙宁娜.png*
>
> *图片缺失：女高中生.webp*
> *图片缺失：小丑撒花.png*
> *图片缺失：海绵宝宝.jpeg*

[!blank-container|no-margin gallery] Title

图片缺失：露西亚.png
图片缺失：芙宁娜.png

图片缺失：女高中生.webp
图片缺失：小丑撒花.png
图片缺失：海绵宝宝.jpeg

[!示例]
这列给一个有标题的==画廊卡片==

示例代码：

> [!info|gallery] Title
>
> *图片缺失：露西亚.png*
> *图片缺失：芙宁娜.png*
>
> *图片缺失：女高中生.webp*
> *图片缺失：小丑撒花.png*
> *图片缺失：海绵宝宝.jpeg*

[!info|gallery] Title

图片缺失：露西亚.png
图片缺失：芙宁娜.png

图片缺失：女高中生.webp
图片缺失：小丑撒花.png
图片缺失：海绵宝宝.jpeg