html+浮动处于右下角,将文字浮动到右下角

小编典典

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

.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