CSS 浮动右下角

Question

我有一些文本，周围漂浮着两个图像：

<!--This is obviously a simplified version, there are other styles needed for the images below-->
<div id="wrapper">
    <h2>Title</h2>
    
    <figure id="image1" style="float: left">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <figure id="image2" style="float: right">
        <img />
        <figcaption>Caption</figcaption>
    </figure>
    
    <p>Lorem Ipsum</p>
</div>

它是这样的：

我想要的是将第一张或第二张图像放置在段落的最底部。像这样的东西（用 Photoshop 制作）：

---

我显然无法设置position: absolute，因为文本将不再漂浮在图像周围。

我无法将包装器显示为 a flexbox，因为它将元素对齐一行（或多行）并破坏所有内容：

我什至尝试将包装器显示为 atable并使用 将图形对齐到底部display: table-cell; vertical-align: bottom，但在这种情况下浮动不再起作用并且图形与中心对齐。

---

我设法得到的唯一部分解决方案是clear: both在图中使用：

这样做的问题是，当调整页面大小时，段落的高度会发生变化，图像不再位于其底部。

---

我能在 SO 上找到的唯一类似的答案是这个，但它在我的情况下不起作用，因为我事先不知道段落高度。

有什么想法让它发挥作用吗？提前致谢。

Answer 1

你可以用 来做到这一点shape-outside。

.container {
  display: flex;/* I need this to use height:100% */
}

#image2 {
  height: 100%; /* take full height */
  float: right;
  /* the below will allow the text to wrap around */
  shape-outside: inset(calc(100% - 135px) 0 0 0); /* 135px is an approximation of the figure height */
  /* move image and caption to bottom (the area kept by shape-outside) */
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
}

#wrapper {
  font-size: 20px;
  text-align: justify;
}

figure {
  margin: 10px;
  text-align: center;
  float: left;
}

p {
  margin: 0;
}

<div class="container">
  <div id="wrapper">
    <figure id="image1">
      <img src="https://picsum.photos/id/1/100/100">
      <figcaption>Caption</figcaption>
    </figure>

    <figure id="image2">
      <img src="https://picsum.photos/id/1/100/100">
      <figcaption>Caption</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nunc ante, cursus ac aliquet id, aliquet vitae orci. Sed faucibus, lorem a dictum iaculis, quam dolor aliquam mauris, eu dapibus ligula tellus quis urna. Maecenas sed justo pharetra,
      fringilla ex a, scelerisque justo. Quisque augue tellus, volutpat vel suscipit et, porta eget neque. Mauris pretium nunc in augue porta, sed egestas risus scelerisque. Nullam tortor nisl, suscipit a enim sit amet, rutrum maximus mauris. Nullam maximus
      lectus ac magna suscipit, nec efficitur nunc finibus. Curabitur malesuada orci nec semper elementum. Sed dignissim, tortor vitae rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. Sed diam est, facilisis ut cursus eu  rhoncus tempor, arcu mi facilisis nibh, vel consequat odio ipsum non augue. </p>
  </div>
</div>

相关更多详细信息：https://dev.to/afif/float-to-the-bottom-corners-i8l