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

Question

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

页面宽度是可变的(响应),但图像尺寸是固定的.是否有可能在HTML和CSS中实现这一点(CSS3很好)？如果没有,可以用最少量的Javascript完成吗？

这是我想要完成的示意图:

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

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

当我float: right在图像上设置时,它会向右浮动,但我无法将其对齐到页面底部.建议？

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

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事件期间将引用传递给spacer元素.

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

此函数有效(请参阅演示),可以为jQuery或您选择的库重新编写.它并不意味着是插件质量代码,而是用来说明这个概念.

jsfiddle.net/n5RPV/9

编辑:我创建了一个jQuery插件版本(github | jsFiddle演示),支持浮动左下角或右下角.它还支持指定与底部对齐的元素.

_{顺便说一句,我没有费心去支持IE7.}

Answer 2

我认为如何解决这个问题的未来方式将是CSS排除.

CSS Exclusions扩展了以前限制为浮点数的内容包装概念....元素在其内容区域中布置其内联内容,并在其关联的包装上下文中包围排除区域( - 从规范中摘录)

这篇msdn文章还解释了排除

...网络作者现在可以包装文本,使其完全包围元素,从而避免浮动的传统限制.而不是限制元素相对于它们在文档流中的位置向左或向右浮动,CSS排除可以定位在距包含块的顶部,底部,左侧或右侧的指定距离处,同时保留部分文件流程.

具有讽刺意味的是,到目前为止这仅适用于IE10(寻找包裹流:这里都是)

在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 Platform团队博客中找到