HTML页面图片与右侧文本布局异常：添加文本致图片下移

这个问题我之前也碰到过！本质是默认文档流的布局特性导致的——图片默认是inline-block元素，和文本放在一起时会默认按基线对齐，再加上块级元素的换行特性，就容易出现图片下移的情况。结合你想要的左侧轮播图+右侧文本的布局，用Flexbox就能完美解决，给你一套现成的代码方案：

1. HTML结构搭建 #

先把轮播图片容器和文本容器放在同一个父容器里，结构清晰好控制：

<div class="content-container">
  <!-- 轮播图片容器（包含你的slider组件） -->
  <div class="image-slider">
    <img src="your-slider-image.jpg" alt="轮播展示图">
    <!-- 这里插入你的轮播控件，比如切换按钮、指示器等 -->
  </div>
  <!-- 右侧文本区域 -->
  <div class="text-content">
    <h3>What I...</h3>
    <p>这里是你需要放置的文本内容，比如个人介绍、项目说明等等</p>
    <p>可以根据需求添加更多段落或其他元素</p>
  </div>
</div>

2. CSS布局核心代码 #

用Flexbox实现横向排列，同时保证顶部对齐、整体居中：

/* 父容器：Flex布局实现横向排列，整体居中 */
.content-container {
  display: flex;
  align-items: flex-start; /* 强制图片和文本顶部对齐，避免下移 */
  justify-content: center; /* 让整个容器在页面中居中 */
  gap: 2rem; /* 图片和文本之间的间距，可根据需求调整 */
  max-width: 1200px; /* 限制最大宽度，避免页面过宽时布局变形 */
  margin: 0 auto; /* 让容器自身水平居中 */
  padding: 2rem; /* 给容器添点内边距，避免内容贴边 */
}

/* 轮播图片容器：固定宽度，防止被压缩 */
.image-slider {
  flex-shrink: 0; /* 禁止图片容器被压缩 */
  width: 400px; /* 根据你的轮播图尺寸调整宽度 */
}

.image-slider img {
  width: 100%;
  height: auto; /* 保持图片比例 */
  display: block; /* 去除图片默认的底部间隙（inline-block特性导致） */
}

/* 文本区域：占据剩余空间，保证布局自适应 */
.text-content {
  flex: 1; /* 让文本容器自动填充父容器的剩余空间 */
  min-width: 300px; /* 设置最小宽度，避免屏幕变窄时文本过于拥挤 */
}

.text-content h3 {
  margin-top: 0; /* 去掉标题默认的上边距，让它紧贴容器顶部 */
}

关键细节说明 #

• align-items: flex-start是解决图片下移的核心：它强制图片和文本容器的顶部对齐，而不是默认的基线对齐，彻底避免了文本高度影响图片位置的问题。
• display: block给图片：消除图片作为inline-block元素时底部的默认空白间隙，让布局更紧凑。
• Flex布局的自适应特性：当屏幕宽度变小时，文本区域会自动收缩，保持布局的合理性，也可以根据需求添加媒体查询进一步优化响应式效果。

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