CSS 浮动右下角

编程问答 2022-05-26

问题描述

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

<!--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>

这是它的样子：

Actual CSS

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

What I would like

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

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

Using Flexbox

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

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

Clear: both

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

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

alignmentcss-floathtmlvertical-alignment