博客多图自动单行排版

技术方案来自木木木木木的多图排版，CSS 代码如下，.post-content 根据博客实际类调整：

.post-content p:has(> img:nth-child(2)){column-count:2;column-gap:8px;margin:6px 0;}
.post-content p:has(> img:nth-child(3)){column-count:3;}
.post-content p:has(> img:nth-child(4)){column-count:4;}
.post-content p:has(> img:nth-child(5)){column-count:5;}
.post-content p:has(> img:nth-child(6)){column-count:4;}
.post-content p:has(> img:nth-child(2)) img{display:inherit;}
.post-content p:has(> img:nth-child(6)) img{margin-bottom:8px;}

一行两图效果

两行三图效果

需要排版在同一行的多个图片 markdown 语法不换行，在<p>里不产生<br>标签。

![](https://vip1.loli.io/2022/02/26/DgYmJuhGzrn5aOe.jpg)

![](https://vip1.loli.io/2022/02/26/gqwS2yeujm3TflK.jpg)
![](https://vip1.loli.io/2022/02/05/mep5Qx6Jah3RS4l.jpg)

如果以上方法没生效， 可能解析 markkdown 语法设置没有开启严格换行，导致每一个换行都会解析成<br>。如果是 Hexo，需要在根目录的_config.yml增加一个解析配置。

marked:
  gfm: true
  breaks: false #Enable GFM line breaks. This option requires the gfm option to be true.

这个图片排版方案有一个缺点，或者叫特性。如果图片比例不一样，会有高低差，这个时候不适合放在同一行，不过已经基本满足需求了。