如何让文本与<figure>标签中的图片平行（右侧）显示？

嘿，我来帮你搞定这个图片和文本横向并排的需求！先看看你现有代码里的几个小问题：

• .frame 类设置了 width: 100px，但 #box 又把宽度改成了1460px，样式冲突了
• vertical-align: left 是无效属性值，vertical-align 只支持 baseline/top/middle/bottom 这类垂直方向的值
• 用负margin定位文本（margin: -1em 1.65em）很容易在不同屏幕尺寸下错位，不够稳定

下面给你两种靠谱的实现方案，优先推荐第一种现代布局方式：

方案1：用Flexbox实现（最简洁稳定） #

Flexbox是现在做横向布局的首选，代码少且兼容性好。你不需要修改HTML结构，只需要调整CSS：

/* 重置容器样式，用flex实现横向布局 */
#box {
  width: 1460px;
  height: 150px;
  border: 1px solid;
  /* 核心：开启flex布局 */
  display: flex;
  /* 垂直方向居中对齐 */
  align-items: center;
  /* 图片和文本之间留间距 */
  gap: 20px;
  /* 给容器加内边距，避免内容贴边 */
  padding: 20px;
  box-sizing: border-box; /* 让padding不会撑大容器宽度 */
}

/* 图片样式调整 */
.profile1 {
  background: #3A6F9A;
  max-height: 150px;
  max-width: 150px;
  /* 去掉之前的float，flex会自动帮我们排列 */
}

/* 文本样式调整 */
#text {
  /* 去掉负margin，用flex自然排列 */
  margin: 0;
  text-align: left;
  /* 可以给文本设置宽度，避免太长时挤垮布局 */
  flex: 1;
}

/* 不需要的样式可以删掉：.helper、.frame里的float/white-space等 */
.frame {
  /* 保留你需要的margin，其他冲突样式删掉 */
  margin: 1em 0;
}

这样调整后，图片会在左侧，文本在右侧自动填充剩余空间，而且垂直居中，布局非常稳定。

方案2：用Float实现（兼容旧浏览器） #

如果你需要兼容非常老的浏览器，可以用float方案，调整如下：

#box {
  width: 1460px;
  height: 150px;
  border: 1px solid;
  padding: 20px;
  box-sizing: border-box;
  /* 清除浮动影响 */
  overflow: hidden;
}

.profile1 {
  background: #3A6F9A;
  max-height: 150px;
  max-width: 150px;
  /* 图片左浮动 */
  float: left;
  /* 图片和文本之间留间距 */
  margin-right: 20px;
}

#text {
  margin: 0;
  text-align: left;
  /* 让文本自动填充右侧空间 */
  overflow: hidden;
  /* 垂直居中文本（适合单行） */
  line-height: 150px;
}

.frame {
  margin: 1em 0;
}

这种方式靠浮动让图片靠左，文本利用overflow:hidden形成BFC，自动占据右侧空间。如果文本是多行，把line-height改成正常值，用padding-top或者其他方式调整垂直位置。

小提示 #

• 尽量避免用固定宽度，如果你想让容器自适应，可以把#box的width改成max-width: 1460px或者直接去掉，让它随内容或父容器调整
• box-sizing: border-box一定要加上，这样padding和border不会额外撑大容器宽度，布局更可控

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