html - 将图像 float 到右下角，文字环绕

Question

我有一个包含段落和标题的文本容器。在页面底部，我想将图像 float 到页面右侧，而文本环绕图像。图片的底部应与最后一段的底部齐平。

页面宽度是可变的(响应式)，但图像尺寸是固定的。是否有可能在 HTML 和 CSS 中完成此操作(CSS3 可以)？如果没有，是否可以使用最少量的 Javascript 来完成？

这是我想要完成的示意性示例:

HTML 目前看起来像这样，但如果需要可以更改。我并不特别关心图像在文档中的位置。使用背景图片也可以。

<section>
  <h2>...</h2>
  <p>... ...</p>
  <p>... ...</p>
  ...
  <img src="...">
</section>

当我在图像上设置 float: right 时，它会向右浮动，但我无法使其与页面底部对齐。有什么建议吗？

编辑:我得到的最接近的是 this ...:-)

Answer 1

创建一个 float: right 和 height 等于内容高度减去图像高度的间隔元素。然后在图像上使用float: right 和clear: right:

<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>

.spacer {
    height: calc(100% - 200px);
    width: 0px;
    float: right;
}
.bottomRight {
    height: 200px;
    float: right;
    clear: right;
}

http://cssdesk.com/bLNWs

我的演示在容器元素中使用固定尺寸。由于这很少是现实情况，因此使用 JavaScript 来调整间隔符的大小可能更有意义。调用此函数，在文档准备就绪时以及 window.onresize 事件期间传递对间隔元素的引用。

function sizeSpacer(spacer) {
    spacer.style.height = 0;
    var container = spacer.parentNode;
    var img = spacer.nextElementSibling || spacer.nextSibling;
    var lastContentNode = container.children[container.children.length - 1];
    var h = Math.max(0, container.clientHeight - img.clientHeight);
    spacer.style.height = h + "px";
    while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
        spacer.style.height = --h + "px";
    }
    if (lastContentNode.getBoundingClientRect().bottom > img.getBoundingClientRect().bottom) {
        spacer.style.height = ++h + "px";
    }
}

此功能有效(see the demo)，并且可以针对 jQuery 或您选择的库进行重新设计。它并不意味着是插件质量代码，而是用于说明概念。

jsfiddle.net/gilly3/xLr7eacp

编辑:我创建了一个 jQuery 插件版本 ( github | jsFiddle demo )，支持 float 左下角或右下角。它还支持指定底部与哪个元素对齐。

_{顺便说一下，我没有费心尝试支持 IE7。}