Question

我有一个@page媒体和一个<div>元素浮动到页面顶部;在<div>内部是<img>和<p>（图片的标题），其中图片向左浮动，标题在父母内部浮动：

<div style="float:top;">
    <img style="float:left;" ... />
    <p id="caption" style="float:right;">
    ...
    </p>
</div>

这会将图像放置在父<div>的左侧，而图像的顶部则是标题。

现在碰巧图像可能很高而且标题很短，在这种情况下，我希望标题仍然位于图像的右侧，但是在父级的{em>底部{{1} } 的。我可以点什么＆＃34;假的＆＃34;这通过给标题一个实际的<div>，但假设我知道图像的高度。（我不喜欢它，因为它被缩放。）

如何为未知图像高度将标题放在父padding-top: ...pt的右下角？

Answer 1

您需要使用绝对位置：

div{ /*replace it with your div id*/
  position: relative;
  overflow: hidden;/*to overcome from the overlap*/
}
#caption{/*caption you want to get at bottom is now relative to div*/
  position: absolute;
  bottom: 0;
  right: 0;
}

将浮动<p>拖放到浮动父级的底部</p> <div> </div>

1 个答案: