CSS 浮动右下角

问题描述

我有一些文字，周围有两张图片：

<!--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，但它在我的情况下不起作用，因为我事先不知道段落高度。

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

解决方法

您可以使用 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,vel consequat odio ipsum non augue. </p>
  </div>
</div>

alignment css-float html vertical-alignment