将图像浮动到右下角，文字环绕 [英] Floating an image to the bottom right with text wrapping around

问题描述

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

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

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

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

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

当我在图像上设置 float: right 时，它会向右浮动，但我无法让它与页面底部对齐.建议?

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

解决方案

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

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

.spacer {高度:计算(100% - 200px)；宽度:0px；浮动:对；}.bottomRight {高度:200px；浮动:对；清楚:对；}

http://cssdesk.com/bLNWs

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

function sizeSpacer(spacer) {间隔器.style.height = 0;var 容器 = separator.parentNode;var img = separator.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 demo) 支持左下浮动或右下角.它还支持指定底部对齐的元素.

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

I have a text container with paragraphs and headings. At the bottom of the page I want to float an image to the right of the page, while the text wraps around the image. The bottom of the image should be flush with the bottom of the last paragraph.

The page width is variable (responsive), but the image dimensions are fixed. Is it possible to accomplish this in HTML and CSS (CSS3 is fine)? If not, can it be done with a minimal amount of Javascript?

Here's a schematic example of what I want to accomplish:

The HTML currently looks something like this, but it can be changed if necessary. I don't particularly care where in the document the image is located. Using background images instead would be fine too.

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

When I set float: right on the image, it floats to the right but I cannot get it to align to the bottom of the page. Suggestions?

Edit: the closest I got is this... :-)

解决方案

Create a spacer element with float: right and height equal to the height of the content minus the height of the image. Then use float: right and clear: right on the image:

<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

My demo uses fixed dimensions in the container element. Since that is rarely a realistic case, it probably makes more sense to use JavaScript to size the spacer. Call this function, passing a reference to the spacer element when the document is ready and during the window.onresize event.

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

This function works (see the demo), and can be reworked for jQuery or your library of choice. It's not meant to be plug-in quality code, but serves to illustrate the concept.

jsfiddle.net/gilly3/xLr7eacp

Edit: I created a jQuery plugin version (github | jsFiddle demo) that supports floating bottom left or bottom right. It also supports specifying which element to align the bottom with.

_{By the way, I didn't bother trying to support IE7.}

这篇关于将图像浮动到右下角，文字环绕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！