如何实现图片与旁侧文字的响应式布局？附示例代码

1. 调整HTML结构（添加类名方便样式控制） #

<div class="row tip-container">
  <img class="arrow-icon" src="/images/arrow_left_icon.png" alt="左箭头图标" />
  <p class="tip-text">tip</p>
</div>

2. 添加CSS样式（实现响应式布局） #

/* 容器用flex布局，实现横向排列+垂直居中 */
.tip-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 箭头和文字的间距，按需调整 */
  padding: 8px 12px; /* 加内边距优化视觉 */
  max-width: 100%; /* 避免超出父容器宽度 */
  box-sizing: border-box;
}

/* 箭头图标样式，保证响应式下不变形 */
.arrow-icon {
  width: 20px;
  height: auto;
  flex-shrink: 0; /* 防止窄屏时箭头被压缩 */
}

/* 提示文字样式，自适应剩余空间 */
.tip-text {
  margin: 0; /* 清除p标签默认外边距 */
  font-size: 14px;
  line-height: 1.5;
  flex: 1; /* 让文字占满剩余空间，过长时自动换行 */
}

/* 小屏适配（按需调整） */
@media (max-width: 320px) {
  .tip-container {
    padding: 6px 8px;
  }
  .arrow-icon {
    width: 16px;
  }
  .tip-text {
    font-size: 12px;
  }
}

关键说明 #

• Flex布局既能轻松实现箭头与文字的垂直居中，还天然适配不同屏幕尺寸；
• flex-shrink: 0 确保箭头在窄屏环境下不会被挤压变形；
• 文字设flex: 1后，会自动填充容器剩余空间，长内容自动换行，不会撑破布局；
• 媒体查询部分可根据实际需求调整断点和样式，优化小屏设备的显示效果。

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