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，因为文本将不再浮动在图像周围。

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

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

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

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

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

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

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

CSS 在右下角浮动

CSS float bottom right

html

css

alignment

css-float

vertical-alignment