Blogger站点4张图片响应式布局：桌面横排移动端竖排配置方法

方法一：用Blogger内置多列布局（最简便） #

• 编辑博文时，选中全部4张图片
• 点击工具栏中的「布局」图标（网格样式），选择「4列」布局
• 完成后发布即可，Blogger会自动处理响应式逻辑：桌面端图片水平排列，屏幕尺寸较小时自动切换为垂直堆叠
• 小提示：如果图片尺寸差异大，可先将每张图片的宽度设为100%，避免布局错位

方法二：自定义少量CSS（灵活性更强） #

如果内置布局满足不了需求，只需在博文里加几行代码：

1. 切换到博文的「HTML视图」
2. 用一个容器包裹所有图片：

<div class="image-grid">
  <img src="你的图片1链接" alt="图片描述1">
  <img src="你的图片2链接" alt="图片描述2">
  <img src="你的图片3链接" alt="图片描述3">
  <img src="你的图片4链接" alt="图片描述4">
</div>

3. 在博文的HTML视图开头或末尾添加CSS样式：

<style>
.image-grid {
  display: flex;
  gap: 10px; /* 可调整图片之间的间距 */
  flex-wrap: wrap;
}
.image-grid img {
  flex: 1 1 22%; /* 桌面端每张图片占约22%宽度，预留间距 */
  min-width: 200px; /* 当屏幕宽度小于200px时，图片自动垂直堆叠 */
  max-width: 100%;
}
</style>

4. 切换回「撰写视图」确认效果，发布后就能实现目标布局

额外注意 #

• 尽量保持图片比例一致，布局视觉效果会更协调
• 内置布局的响应式适配是Blogger默认配置，无需手动调整阈值

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