与创建一个间隔元件
float: right和
height等于高度的内容的减去的图像的高度。然后在图像上使用
float: right和
clear: right:
<div ></div><img src="" /><div ></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或您选择的库进行重新设计。它并不是要成为插件质量代码,而只是用来说明概念。



