Question

我是菜鸟，所以这可能是基本的东西，但我试图通过搜索网络来解决这个问题，但没有任何运气。非常感谢任何帮助！

我需要做的是：在渲染页面后向下移动X px，其中X是另一个页面的高度。我已经手动测试了CSS，将X px添加到“Top：”属性并且它工作正常，问题是在页面渲染后将其执行到六个实例。

（我需要这样做的原因是我无法控制来自数据库的输出，否则我会将顺序重新排列为

解决方案可以使用JavaScript和/或jQuery，甚至根据初始脚本语句加载mootools。

我在最后一个div中添加了ID选择器的代码，我不知道这是否相关，我只是感觉它是在浏览网页两天后。

非常感谢！

<div id="blogwrap1"> <--! Wraps all blog entries for one page-->

    <div class="blogwrap2"> <--! Same as above, just a second wrap-->

＆LT;！ - ======================本节我重复了6次====================== - ＆GT;

        <div class="entry"> <--! Wraps 1 blog entry-->

            <div class="entry-title"></div>

            <div class="entry-body">

                <div class="links"></div> <--! Here I need to add HEIGHT from "entry-tags" to TOP property -->

            </div>

            <div class="entry-footer">

                <div class="entry-footer-line">

                    <div class="entry-tags"></div> <--! Get HEIGHT property -->

                </div>
            </div>
        </div>
    </div>
</div>

＆LT;！ - ================================================== ==================== - ＆GT;

UPPDATE！

我在这里放了一个带有html / CSS等的软件包进行测试。

move_div.zip （64,5kb）

我可能不清楚的一件事是“entry-tags”的高度应该添加到“links”类的“top”属性中（它不应该替换值）。我想要做的是当“入口标签”根据输入标签/行标签的数量而改变高度时，将div相对浮动到相同的位置。希望有道理。谢谢！

Answer 1

这是你要找的那条线吗？

$('div#move_me_down').css('top', $('div#the_one_that_we_need_the_height_from').height()+'px');

Answer 2

不相关，但是：

如果您同时加载了Mootools和jQuery，您可能需要纠正它。 $运算符在每个运算符中具有不同的含义，因此为一个运算符编写的脚本可能不起作用。尝试使用其中一种。

那就是说，这里是jquery，假设.entry-tags和.links不在任何其他定位元素中：

var pos = $('.entry-tags:first').position();
$('.links:first').css('top', pos.top);

===========实质性编辑，上面的代码留给后人和清晰度==============

看过你澄清的问题：

$('.entry').each(function(){
    var height = $(this).children('.entry-tags').height();
    $(this).children('.links').css('top', height);
});

如果您希望.links相对于“条目”定位，您可以确保该条目声明了“position：relative”。定位元素（绝对和相对两者）的位置与其第一个定位父元素相关。

Answer 3

我借助之前的答案解决了这个问题。他们没有开箱即用，但指出了正确的方向。非常感谢你！以下代码现在按预期工作：

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(function(){ 
        jQuery('.entry').each(function(){
        var extra = jQuery(this).find('.entry-tags').height();
        var total = 44 + extra;
        jQuery(this).find('.linkr-bm').css('top', total + 'px');
        }); 
    });
});

JavaScript：计算<div>中CSS属性到另一个<div> </div> </div>的值

3 个答案: