将文字浮动到右下角

小编典典

将文字浮动到右下角

html

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

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

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

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

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

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

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

阅读 518

2020-05-10

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

我的演示在容器元素中使用了固定尺寸。由于这很少是现实情况，因此使用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或您选择的库进行重新设计。它并不是要成为插件质量代码，而只是用来说明概念。

2020-05-10