如何使用Flexbox实现图片与段落并排且不干扰段落布局（不影响移动端）

解决方案步骤 #

1. 调整HTML结构：给图片和段落套一个Flex容器，统一控制两者的布局关系
2. 用Flexbox替代Float：通过容器的display: flex实现并排，用gap控制间距（解决左侧空白问题）
3. 媒体查询适配移动端：在小屏幕下让容器换行，保持原有移动端布局不受影响

完整代码示例 #

HTML

<!-- 新增flex容器包裹图片和段落 -->
<div class="content-container">
  <img class="img-2yb" src="https://via.placeholder.com/400" alt="img beside ig">
  <p>这里是你的段落内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS

/* Flex容器样式 - 适配平板/笔记本 */
.content-container {
  display: flex;
  align-items: flex-start; /* 让图片和段落顶部对齐 */
  gap: 16px; /* 控制图片和段落的间距，替换原有左侧空白 */
  padding-top: 20px; /* 把原图片的padding移到容器，统一控制 */
}

/* 图片样式 */
.img-2yb {
  width: 20%;
  /* 移除原float: left，用Flex控制布局 */
}

/* 媒体查询：移动端（可根据需求调整断点） */
@media (max-width: 767px) {
  .content-container {
    flex-direction: column; /* 切换为垂直布局 */
    gap: 12px; /* 移动端调整间距 */
  }
  .img-2yb {
    width: 100%; /* 移动端图片占满宽度，匹配原有布局 */
  }
}

关键细节说明 #

• 抛弃Float布局：Flex布局比Float更稳定，避免排版塌陷、清除浮动等问题
• gap属性：精准控制图片与段落的间距，解决左侧空白问题，实现紧邻且合理的排版
• align-items: flex-start：确保图片和段落顶部对齐，避免文字与图片中间对齐的违和感
• 媒体查询断点：767px为常用平板/移动端分界，可根据你的原有移动端布局调整数值，保证小屏幕效果不受影响

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