栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

将文字浮动到右下角

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

将文字浮动到右下角

与创建一个间隔元件

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或您选择的库进行重新设计。它并不是要成为插件质量代码,而只是用来说明概念。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/614974.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号