如何解决figure元素无法左对齐且文本无法同行右侧布局的问题

我来帮你搞定这个布局问题！你想要的是figure左对齐、文本在右侧同行的效果，之前的CSS没生效主要有两个原因：一是用错了浮动方向，二是没限制figure的宽度（默认块级元素会占满整行）。下面给你两种可行的解决方案：

方案一：使用浮动布局（兼容旧浏览器） #

这种方法利用浮动让figure靠左，文本自动环绕到右侧，同时需要限制figure的宽度，并处理父元素的浮动塌陷问题：

/* 调整figure的浮动和宽度 */
figure.image-style-align-left {
  float: left; /* 左浮动，让文本移到右侧 */
  width: 30%; /* 设置固定宽度，避免占满整行 */
  margin-right: 20px; /* 和文本之间留出间距，提升可读性 */
  margin-top: 0; /* 去掉默认顶部margin，和标题对齐更整齐 */
}

/* 清除父元素的浮动，防止.row高度塌陷 */
.row::after {
  content: "";
  display: table;
  clear: both;
}

你的HTML代码可以保持不变，应用这段CSS后，figure就会靠左，文本在右侧同行显示了。

方案二：使用Flex布局（现代浏览器推荐） #

Flex布局更简洁，不需要处理浮动塌陷，是当前更推荐的布局方式：

/* 把父容器.row设置为flex容器 */
.row {
  display: flex;
  align-items: flex-start; /* 让figure和文本顶部对齐 */
  gap: 20px; /* 直接设置figure和文本的间距 */
}

/* 固定figure的宽度，不随容器拉伸 */
figure.image-style-align-left {
  flex: 0 0 30%; /* 第一个0表示不放大，第二个0表示不缩小，30%是固定宽度 */
  margin: 0; /* 去掉figure默认的margin */
}

/* 让图片占满figure的宽度 */
figure.image-style-align-left img {
  width: 100%;
  height: auto; /* 保持图片比例 */
}

这个方案下，figure和文本会自动横向排列，布局更稳定，也更容易维护。

为什么之前的CSS没生效？ #

• 你设置了float: right，这会让figure靠右，而不是你需要的靠左；
• figure默认是块级元素，即使浮动，如果没设置宽度，它会尽可能占满可用空间，导致文本无法在同一行显示。

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