如何将多个Pinterest Pin嵌入网页并实现横向并排显示？

下面几种方法都能快速实现2-3个Pin的横向排列，按需选择即可：

方法1：CSS Flexbox（推荐） #

Flexbox是最灵活的布局方式，能轻松实现并排，还能自动处理屏幕适配的换行问题。

代码示例： #

<!-- 用容器包裹所有Pin -->
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
  <!-- 第一个Pin -->
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=424605071137135326" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <!-- 第二个Pin -->
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=替换成你的第二个PinID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <!-- 第三个Pin（可选） -->
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=替换成你的第三个PinID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
</div>

• display: flex：让容器内的元素横向排列
• gap: 20px：设置Pin之间的间距（可自定义数值）
• flex-wrap: wrap：当屏幕宽度不足时，Pin会自动换行，避免溢出页面

方法2：CSS Grid #

如果需要更规整的列布局，Grid是合适的选择：

代码示例： #

<!-- 用容器包裹所有Pin -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(345px, 1fr)); gap: 20px;">
  <!-- 第一个Pin -->
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=424605071137135326" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <!-- 第二个Pin -->
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=替换成你的第二个PinID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <!-- 第三个Pin（可选） -->
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=替换成你的第三个PinID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
</div>

• grid-template-columns: repeat(auto-fit, minmax(345px, 1fr))：自动根据屏幕宽度调整列数，最小列宽匹配Pin的宽度（345px）
• gap: 20px：设置Pin之间的间距

方法3：inline-block（传统兼容方案） #

这种方式兼容性极强，但需要处理元素间的默认空白间隙：

代码示例： #

<!-- 容器设置font-size:0消除默认间隙 -->
<div style="font-size: 0; margin: -10px;">
  <!-- 第一个Pin -->
  <iframe style="display: inline-block; margin: 10px;" src="https://assets.pinterest.com/ext/embed.html?id=424605071137135326" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <!-- 第二个Pin -->
  <iframe style="display: inline-block; margin: 10px;" src="https://assets.pinterest.com/ext/embed.html?id=替换成你的第二个PinID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <!-- 第三个Pin（可选） -->
  <iframe style="display: inline-block; margin: 10px;" src="https://assets.pinterest.com/ext/embed.html?id=替换成你的第三个PinID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
</div>

• display: inline-block：让iframe横向排列
• 容器font-size:0+iframe的margin：用来消除inline-block元素间的默认空白间隙

注意事项： #

• 替换代码中替换成你的第二个PinID这类内容为你实际的Pinterest Pin ID
• 如果需要调整Pin的大小，直接修改iframe的width和height属性即可，建议保持原比例避免变形

内容的提问来源于stack exchange，提问作者Cullen Boone