You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:SharePoint现代页面实现多图并排布局(无HTML权限)

SharePoint现代版实现多列图片并排的方案

方案1:使用图库Web部件(最简单无代码)

  • 直接在页面添加图库Web部件,而非单个图片Web部件
  • 选择图片来源(站点图片库/上传图片)
  • 在Web部件属性面板中,切换到「布局」选项:
    • 选择「网格」布局
    • 调整「列数」(支持最多6列,可按需设置)
    • 微调图片间距、裁剪方式,匹配你需要的效果

方案2:自定义CSS实现(需CSS编辑器权限)

如果图库Web部件无法满足需求,可通过自定义CSS强制图片并排:

  1. 在页面添加文本Web部件,将所有需要并排的图片插入到这个Web部件中(直接上传或从图片库选择)
  2. 编写以下CSS代码(可根据需求调整列数、间距):
/* 5列并排示例,调整width百分比可改列数 */
.ms-Text img {
    display: inline-block;
    width: 19%;
    margin: 0.5%;
    box-sizing: border-box;
}
/* 或用Flex布局更灵活 */
.ms-Text {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ms-Text img {
    flex: 1 1 18%; /* 基础宽度18%,自动适配屏幕,可加min-width控制最小尺寸 */
}
  1. 将CSS代码添加到站点自定义CSS中(通信站点可在「站点设置-外观-自定义CSS」添加,或通过页面级自定义CSS功能)

方案3:Power Apps嵌入(需Power Apps权限)

  1. 打开Power Apps创建空白画布应用
  2. 添加画廊控件,设置数据源为你的SharePoint图片库(或上传图片到Power Apps媒体库)
  3. 调整画廊布局为「水平」,设置「Wrap count」为需要的列数(比如5),同时调整每个图片项的尺寸
  4. 保存应用后,在SharePoint页面添加Power Apps Web部件,选择创建好的应用,调整Web部件大小适配页面

内容的提问来源于stack exchange,提问作者user1601436

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 01:43:19