网页图文框布局异常：多文本时文字跳至图片下方的修复方法

你的问题出在使用inline-block布局时，当文字内容宽度超过容器剩余空间，inline-block元素会自动换行到图片下方。下面提供两种可靠的修复方案：

方案一：Flexbox布局（推荐，现代浏览器兼容） #

Flexbox是专门解决这类布局问题的方案，只需调整.textBox和.textBoxContent的CSS：

.textBox {
  background: white;
  padding: 8px;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 10px;
  display: flex; /* 启用Flex布局 */
  gap: 16px; /* 图片和文字的间距，可自行调整 */
  align-items: flex-start; /* 让文字与图片顶部对齐 */
}

.textBoxContent {
  flex: 1; /* 让文字区域自动填充图片右侧的剩余空间 */
}

/* 原有样式保持不变 */
.textBoxTitle {
  font-size: 30px;
  line-height: 0px;
}

.textBoxText {
  font-size: 15px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.textBoxImg {
  border-radius: 10px;
  max-width: 40%;
  height: auto;
}

修改后，无论文字内容多少，都会在图片右侧的空间内自动换行，不会跑到图片下方。

方案二：Float布局（兼容旧浏览器） #

如果需要兼容较老浏览器，可使用浮动属性实现：

.textBox {
  background: white;
  padding: 8px;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 10px;
  overflow: auto; /* 清除浮动，避免容器高度塌陷 */
}

.textBoxImg {
  border-radius: 10px;
  max-width: 40%;
  height: auto;
  float: left; /* 让图片左浮动 */
  margin-right: 16px; /* 图片和文字的间距 */
}

.textBoxContent {
  overflow: hidden; /* 触发BFC，确保文字环绕在图片右侧 */
}

/* 原有样式保持不变 */
.textBoxTitle {
  font-size: 30px;
  line-height: 0px;
}

.textBoxText {
  font-size: 15px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

浮动布局通过让图片左浮，同时让文字区域触发BFC，保证文字始终在图片右侧换行显示。

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