如何将占位图片左对齐至屏幕左侧空白区域？附相关代码

我明白你想要把<figure>里的占位图片放到页面左侧的空白区域，而不是被限制在绿色的<article>容器里。咱们来调整代码实现这个需求：

首先看你当前的布局，main使用了justify-content: flex-end，这会让红色的aside和绿色的article整体靠右侧排列，左侧自然就留出了空白区域。要让图片能定位到这个空白区，核心是调整figure的定位方式：

修改后的完整代码 #

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; /* 新增，避免padding/border打乱布局宽度计算 */
}
main{ 
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  justify-content: flex-end; 
  position: relative; /* 新增，作为绝对定位元素的参考父容器 */
}
aside { 
  width: 300px; 
  height: 100vh; 
  background-color: red; 
}
article { 
  width: 100%; 
  max-width: 500px; 
  height: 100vh; 
  background-color: green; 
}
figure { 
  position: absolute; /* 把相对定位改成绝对定位，脱离原文档流 */
  top: 0; /* 可选：对齐顶部，可根据需求调整为50%+transform实现垂直居中 */
  left: 0; /* 关键：对齐屏幕左侧空白区域 */
  padding: 1rem; /* 可选：给图片加些内边距，避免贴边 */
}
figure img { 
  display: block; /* 去掉图片默认的行内元素间距 */
  width: auto; /* 保持图片原始比例，可改为300px和aside宽度匹配 */
  max-height: 90vh; /* 限制图片最大高度，避免超出视口 */
}

核心调整说明 #

• 给main添加position: relative：让figure的绝对定位以main为参考，确保它的位置和整体布局关联
• 将figure的position: relative改为position: absolute：让图片脱离原来的article容器，自由定位到左侧空白
• 设置figure的left: 0：直接把图片对齐到屏幕左侧边缘

如果需要图片刚好填满左侧空白的宽度（和aside一样宽），只需要把figure img的width设置为300px即可。

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