多图布局演示

阅读时间：1分钟

此页面演示了多图布局功能，该功能可根据每组图片的数量自动将图片排列成列。布局具有响应式设计，可适应不同的屏幕尺寸。

使用规则

图片之间可以用换行符分隔，但不能用空行分隔。CSS 会根据元素<img>内标签的数量自动调整列数<p>。

例如：

![](image1.jpg)![](image2.jpg)![](image3.jpg)

演示示例

两张图片

三幅图

四张图片

五张图片

六张图片

风景与人像混合照片

这种布局能够很好地处理混合方向的显示，但列高可能会有所不同：

特征

• 自动列分布：图片会根据数量自动排列成 2-4 列。
• 响应式设计：布局可根据移动设备进行调整，在小屏幕上采用单列显示。
• 混合方向：在同一组图像中同时处理横向和纵向图像。
• 统一间距：保持图像和列之间的间距一致。
• 防断行：防止图片跨列断行。