[Obs＃83] 多栏式Callouts! 直接套用CSS片段变身N栏～

..

MCL Multi Column.css是一个不到8KB大小的CSS档，只要存入储存库.obsidian/snippets资料夹并在外观里启用此CSS片段，就能以下列方法呈现更多变化：

1. 多栏式呈现笔记的Callouts内容
2. 指定Callouts的显示大小与浮动位置(浮动位置在阅读模式生效)
3. 将无序列表变成多栏显示(在阅读模式生效，Callouts里也会生效)

[!info] MCL?
MCL是“Modular CSS Layout”的缩写

1. 多栏式Callouts

[!tip] Callouts类型
1. 显示标题列：> [!multi-column]
2. 隐藏标题列：> [!blank-container]

[!tip] 使用方法
1. 字段间用一个 > 分隔
2. 每个Callout区块多增加一个 >
3. 字段数由2到N，只要萤幕宽度足够，会自动分配栏宽
4. 可使用Style Settings外挂设定

1.1. 两栏

 > [!multi-column] > >> [!note]+ 待办事项 >> your notes or lists here. using markdown formatting > >> [!warning|right-small]+ 进行中事项 >> your notes or lists here. using markdown formatting 

1.2. 三栏

 > [!multi-column] > >> [!note]+ 待办事项 >> your notes or lists here. using markdown formatting > >> [!warning]+ 进行中事项 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事项 >> your notes or lists here. using markdown formatting 

1.3. 三栏

 > [!multi-column] > >> [!note]+ 待办事项 >> * Item 1 >>    * Item 1-1 >>    * Item 1-2 >>    * Item 1-3 >> >>> [!EXAMPLE] 范例 >>> ``` >>> String msg ="Hello, world!"; >>> ``` > >> [!warning]+ 进行中事项 >> 使用图片： >> ![[Obs＃83 多栏式Callouts! 直接套用CSS片段变身N栏～ image 1.png]] > >> [!success]+ 已完成事项 >> 使用影片： >> >> [用Obsidian学会Markdown|embded](https://youtu.be/lnsQsFCYhNc) 

1.4. 四栏

 > [!multi-column] > >> [!note]+ 待办事项 >> your notes or lists here. using markdown formatting > >> [!warning]+ 进行中事项 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事项 >> your notes or lists here. using markdown formatting > >> [!info]+ 说明 >> your notes or lists here. using markdown formatting 

1.5. 五栏

 > [!multi-column] > >> [!note]+ 待办事项 >> your notes or lists here. using markdown formatting > >> [!warning]+ 进行中事项 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事项 >> your notes or lists here. using markdown formatting > >> [!info]+ 说明 >> your notes or lists here. using markdown formatting > >> [!quote]+ 引用 >> your notes or lists here. using markdown formatting 

1.6. 六栏

 > [!multi-column] > >> [!note]+ 待办事项 >> your notes or lists here. using markdown formatting > >> [!warning]+ 进行中事项 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事项 >> your notes or lists here. using markdown formatting > >> [!info]+ 说明 >> your notes or lists here. using markdown formatting > >> [!quote]+ 引用 >> your notes or lists here. using markdown formatting > >> [!error]+ Expired! >> your notes or lists here. using markdown formatting 

1.7. 隐藏标题列

 > [!multi-column] > >> [!blank-container]+ 待办事项 >> * Item 1 >>    * Item 1-1 >>    * Item 1-2 >>    * Item 1-3 >> * Item 2 >>> [!EXAMPLE] 范例 >>> ``` >>> String msg ="Hello, world!"; >>> ``` > >> [!blank-container]+ 进行中事项 >> 使用图片： >> ![[Obs＃83 多栏式Callouts! 直接套用CSS片段变身N栏～ image 1.png]] > >> [!blank-container]+ 已完成事项 >> 使用影片： >> >> [用Obsidian学会Markdown](https://youtu.be/lnsQsFCYhNc) 

2. 指定Callouts大小与浮动位置

 > [!error|right-small] 浮动到右侧 > 小视窗，靠右 

扩充Callouts的语法，在Callout类型后加上Pipe，再输入下列设定：

[!tip] 语法

[!Callout类型|left/right-small/medium/large]
[!blank-container|left/right-small/medium/large]

3. 多栏式列表

[!tip] 使用说明
1. YAML区加入cssClasses: 多栏CSS即会自动显示成指定的栏数
2. 多栏CSS有下列几种：

1. two-column-list: 垂直填充
2. three-column-list: 垂直填充
3. two-column-grid-list: 水平填充
4. three-column-grid-list: 水平填充

4. 相关链接

• efemkay/obsidian-modular-css-layout: CSS Layout hack for Obsidian.md
• MCL Multi Column.css

5. 教学影片

＃＃