将图像浮动到右下角，文字环绕

Question

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

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

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

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

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

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

编辑：我得到的最接近的是 这个…… :-)

原文由 molf 发布，翻译遵循 CC BY-SA 4.0 许可协议

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";
    }
}

此功能有效（ 请参阅演示），并且可以针对 jQuery 或您选择的库进行重新设计。它并不意味着是插件质量代码，而是用于说明这个概念。

jsfiddle.net/gilly3/xLr7eacp

编辑： 我创建了一个支持浮动左下角 或 右下角的 jQuery 插件版本（ github | jsFiddle 演示）。它还支持指定底部与哪个元素对齐。

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

原文由 gilly3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为未来解决这个问题的方法将是使用 CSS Exclusions 。

CSS Exclusions 扩展了以前仅限于浮动的内容包装概念。 …元素在其内容区域中布局其内联内容，并在其关联的包装上下文中环绕排除区域（– 规范 摘录）

This msdn article 还解释了排除

…网络作者现在可以换行文本，使其完全包围元素，从而避免传统的浮动限制。 CSS Exclusions 可以定位在距离包含块的顶部、底部、左侧或右侧指定距离的位置，而不是将元素限制为相对于它们在文档流中的位置向左或向右浮动，同时保留部分文档流。

具有讽刺意味的是，到目前为止这只适用于 IE10（在 这里 寻找 wrap-flow:both ）

在 IE10+ 中查看 这个小提琴

这是代码的样子：

  <div class="container">
    <div class="exclusion">
        Exclusion positioned at bottom right hand side of text.
    </div>
    <div class="dummy_text">
        <p>text here</p>
    </div>
</div>

CSS

 .container {
    font-size: small;
    background: aqua;
    position: relative;
}

.exclusion {

    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    z-index: 1;
    position:absolute;
    right:0;
    bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */
    width: 150px;
    height: 100px;
    background: url(http://placehold.it/150x100) no-repeat;
}

所以正如你所看到的——即使排除是绝对定位的——它仍然像一个浮动——在这种情况下：浮动在右下角。

关于浏览器支持：

查看 此站点，其中显示浏览器支持哪些属性（迄今为止：仅 IE10+ 支持 wrap-flow:both ）

PS：有关 CSS 排除（以及其他类似模块，如 CSS 区域和 CSS 形状）的最新更新可在 Adobe Web 平台团队博客 中找到

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议