html图片靠右浮动 文字左侧环绕,关于html：将图片浮动到右下角，文字环绕

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

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

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

HTML当前看起来像这样，但是可以根据需要进行更改。 我并不特别在意图像在文档中的位置。 使用背景图像也可以。

...

... ...

... ...

...

 

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

编辑：我最接近的是这个... :-)

您不能在浮动元素上设置底部位置，也不能将内容包装在绝对定位的元素周围。您可能需要为此使用脚本。

如果仅使用HTML / CSS无法完成，则对使用Javascript的解决方案开放。

stackoverflow.com/questions/526035/

jQuery好吗？ ....

我认为链接的问题不适用。我专门在寻找环绕图像的文字。我不介意是否使用了任何JS库，我只会使用相关的部分。

该图像具有固定高度或未定义？

是的，图像尺寸是固定的。

我开始写东西，但是我没时间了。这可能会有所帮助：jqueryfordesigners.com/fixed-floating-elements

CSS的可能重复项：将文本环绕在右下角的div上？

实际上我知道这个问题，目前还没有CSS 2.1的解决方案。在CSS3的情况下，也许仅使用flexboxes，但IE9和更早版本不支持它们。您也可以使用：before和：last-of-type选择器将最后一段推到左侧，但是它仍然很丑陋，与其他段落重叠，并不是所有jsfiddle.net/Z7u6t的解决方案

我对基于CSS3的解决方案持开放态度。显然，这个问题以前已经提出过(纯HTML / CSS2不可能实现)。也许值得考虑这些天是否有新的或更确定的答案。

之前已经问过这个问题，并且没有提出有效的解决方案。 CSS的严重失败是诸如此类的布局问题没有解决方案。为这个问题+1

@isherwood-使用CSS排除，您可以浮动一个绝对定位的元素-如我在此处所示。没错，目前只有IE10 +支持此功能，但看起来这将是未来的方法。

可以使用CSS区域执行此操作，但我认为它目前仅适用于Chromes Canary浏览器。

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

.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 +&#