浮动图片旁文本底部对齐的布局实现问题

我太懂这种挫败感了——想让文本在左右两张浮动图片周围自然换行，还得让文本的最后一行严丝合缝贴在容器底部，试了好几种属性都没达到预期对吧？

先看看你现有代码里的核心问题：你给.box加了align-content: end，但这个属性只有在flex或grid容器里才会生效，而你的.box是普通块级元素，所以这个设置等于没写。另外，.wrapper是flex容器，但.box没有占满容器高度的设置，也没法让文本块自动靠底。

下面是调整后的解决方案，核心思路是用flex布局把文本块“推”到容器底部，同时保留浮动图片的文本环绕效果：

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
  display: flex;
  width: 320px;
  height: 270px;
  background-color: #c1bea6;
}
.box {
  flex: 1; /* 让.box填满wrapper的可用空间 */
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
}
.content {
  margin-top: auto; /* 关键：把文本块推到.box的底部 */
  text-align: justify;
  font-size: 20px;
}
.img-right {
  float: right;
  height: 100px;
  width: 100px;
  margin-left: 15px;
  object-fit: contain;
  object-position: bottom;
  shape-outside: inset(calc(100% - 100px) 0 0);
}
.img-left {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 15px;
  object-fit: contain;
  object-position: top;
  shape-outside: inset(calc(100% - 100px) 0 0);
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="box">
    <div class="content">
      <img class="img-right" src="https://picsum.photos/id/1080/100/100">
      <img class="img-left" src="https://picsum.photos/id/1079/100/100">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna.
    </div>
  </div>
</div>
</body>
</html>

关键修改点说明： #

1. 给.box添加flex: 1：让它填满.wrapper的整个高度，确保我们有足够的空间调整文本位置。
2. 把.box改成flex容器（display: flex; flex-direction: column;）：这样我们可以用flex的垂直布局特性来控制内部元素的位置。
3. 新增.content容器包裹图片和文本：给它加margin-top: auto，这是核心技巧——auto margin会吃掉容器顶部的所有可用空间，把.content牢牢推到.box的底部。
4. 统一图片高度：之前的.img-right用了height: 100%会导致图片撑满.content高度，改成固定100px和.img-left统一，保持布局一致性。

这样修改后，文本会正常环绕左右两张图片，同时整个文本块的最后一行会精准贴在.wrapper的底部，完全符合你的需求～

内容来源于stack exchange