如何在HTML中实现文字与图片并排布局？现有代码无法生效

原代码无法实现并排的根本原因 #

• 用错了容器：<span>是纯内联元素，无法正常包裹<h2>这类块级标题元素，块级元素在容器内会默认撑满整行、垂直堆叠，不具备并排的基础
• 语法存在错误：<img>标签重复写了两次class属性，第二次的class = my-image还未给属性值添加引号，HTML规范要求同一个元素不能重复定义同一个属性，重复的属性会被浏览器直接丢弃，对应my-image类的样式完全无法生效
• 缺少布局规则：没有给容器定义横向排列的布局逻辑，块级元素默认的垂直堆叠模式，本身就和横向并排的目标相悖

修正后的实现步骤 #

1. 将无布局能力的<span>容器替换为块级容器<div>
2. 合并重复的class属性，补全缺失的引号修正语法错误
3. 给容器添加弹性布局规则，让内部元素沿横向排列

修正后的HTML代码：

<div class="pizza-wrapper">
    <h2 class="pizza-text">People disappoint, but our pizza never does.</h2>
    <img 
        class="pizza my-image" 
        src="https://www.crushpixel.com/big-static12/preview4/pizza-slice-on-dark-background-1108256.jpg" 
        alt="My image" 
        width="600"
    >
</div>

配套生效的CSS代码：

.pizza-wrapper {
  /* 开启弹性横向布局 */
  display: flex;
  /* 让内部的文本和图片沿垂直方向居中对齐，避免顶对齐的错位感 */
  align-items: center;
  /* 给文本和图片之间预留固定间距，避免内容挤在一起 */
  gap: 24px;
}

补充注意事项 #

• 实用提示：早期实现横向并排常通过float浮动方案，但这类方案容易引发高度塌陷、内容错位的问题，使用Flex布局的兼容性和维护性更好，是当前实现横向并排效果的首选方案
• 如果需要让图片和文本分别靠容器左右两侧分布，可以给Flex容器追加justify-content: space-between属性，实现两端对齐的布局效果

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