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