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

问题描述

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

页面宽度是可变的（响应式），但图片尺寸是固定的。是否可以在HTML和CSS（CSS3是好的）？

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

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

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

在 float：right 图像，它漂浮在右边，但我不能得到它对齐到页面的底部。建议？

编辑：我最近得到的是这个 ...： - ）

解决方案

使用 float：right 和 height 等于内容的高度减去图像的高度。然后在图片上使用 float：right 和 clear：right ：

$ b b

 < div class =spacer>< / div> 
< img class =bottomRight>< / div> 
< 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 demo ），支持浮动左下角或右下角。它还支持指定哪个元素对齐底部。

_{顺便说一句，我没有费心试图支持IE7。} p>

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

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/n5RPV/9

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屋！