如何在不修改HTML的情况下通过CSS分离顶部图片与文字

无法修改HTML结构的情况下，用Flex布局就能轻松实现图片居左上角、标题居右上角的效果，调整后的CSS代码如下：

#header {
  background-color: blue;
  width: 100%;
}

#header > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px; /* 可选，避免元素贴边 */
}

#picture {
  margin: 0;
}

#header h1 {
  margin: 0; /* 移除默认边距，优化排版 */
}

关键逻辑 #

• 给包含图片和标题的父容器（#header的第一个子div）设置display: flex，利用justify-content: space-between让内部元素自动向两端对齐。
• align-items: center保证图片和标题在垂直方向上居中，避免视觉错位。
• 去掉#picture原有的margin: 0 auto，让图片保持左对齐。

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