jquery - 容器高度设置为容器中最后一个子项的 css 顶部 + 几像素

标签 jquery html css containers

我正在尝试通过 Isotope、无限滚动和 Packery 的组合将容器的高度设置为容器高度内的最后一个子项。这是我基本上拥有的代码。

   <html>
    <div id="container" class="variable-sizes isotope" style="position: relative; overflow: hidden;">
       <div class="isoItem isotope-item" style="position: absolute; height: 0px; left: 0px; top: 0px;"> </div>
       <div class="isoItem" style="position: absolute; left: 0px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 340px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 680px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 1020px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 1190px; top: 0px;"></div>
       <div class="isoItem" style="position: absolute; left: 1360px; top: 2089px;"></div>
    </div>
   </html> 

这就是我想要实现的目标:

$('#container').css('height', $('.isoItem:last').css('top') + '317px');

在这种情况下,#container 高度将设置为 2089px + 317px = 2415px 任何帮助将不胜感激。

最佳答案

试试这个:

$('#container').height( (parseInt( $('.isoItem:last').css('top'), 10) + 317) );

为什么?

$('.isoItem:last').css('top') 返回一个带有单位的值,例如 px,因此您不能直接对其进行数学运算。首先通过 parseInt() 将其转换为 interget,然后添加您的 317(使用 .height() 时无需附加 + 'px' > 因为 jQuery 会自动执行)。

关于jquery - 容器高度设置为容器中最后一个子项的 css 顶部 + 几像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22967982/

相关文章:

javascript - 用 jQuery 替换背景图像时找不到图像

html - 在CSS中获得相同的形状

php - 网站导航栏 : Displaying webpages while retaining the highlighted menu

javascript - 隐藏基于当前日期的下拉选项

javascript - 在jquery中动态获取输入标签onkeypress的值

php - 访问 json 对象中的数字属性

php - 将多条记录插入php中的不同占位符和网格系统中的错误

html - 当显示页面出现在 ListView 中时,后退按钮被隐藏

javascript - 删除类后 CSS 转换不起作用

html - 使用单个 div 清除 float