Question

我有一个相同高度的网格，可以在点击时展开。为了让div的其余部分在扩展时保持在他们的位置，我给了它margin-bottom: -100px。

然而，当一个div扩展时，所有在他下面，只是一秒钟，改变他们的位置，然后他们回来。

我虽然使用JS为每个人设置一个固定的位置，但后来我意识到我需要页面可以调整大小，所以我不能每次都执行Javascript。

你可以给我任何关于如何在不改变位置的情况下使div覆盖他的邻居的建议吗？

Answer 1

所以，我查看了你的代码，发现了错误。 CSS代码托管margin-bottom -256px。基本上，每当您点击div时，您就会在最高点击内容之上将内容提取256像素，从而获得反弹效果。为了检查自己，我做了调整，向您展示了课程.posts-container .post-single.expanded（here）

上的256px。

这是一个简单的修复，只需摆脱-256px并放入1px。我在这里进行了调整（here）

Answer 2

基本上，我发现目前没有办法得到我想要的东西，所以涉及到一些JS我得到了这个：

$('.expand:has(.open:visible)').click(function()
{
    var button, backdrop, postOriginal, post;

    button       = $(this);
    backdrop     = $('.backdrop');
    postOriginal = button.parents('.post-single');
    post         = postOriginal.clone().addClass('expanded');

    post.css(
        {
            top: ( postOriginal.position().top + $('.widget-container').scrollTop() ) + 'px',
            left: postOriginal.position().left + 'px'
        }
    );

    backdrop.fadeIn().before(post);

    $(window).resize(function()
    {
        post.css(
            {
                top: ( postOriginal.position().top + $('.widget-container').scrollTop() ) + 'px',
                left: postOriginal.position().left + 'px'
            }
        );
    });

    $('.backdrop, .expand:has(.notOpen:visible)').click(function(event)
    {
        $('.backdrop').fadeOut()
            .prev().remove();

        event.stopPropagation();
        return false;
    });

    return false;
});

它克隆帖子平铺，给它一个确切的位置，因为它是原始的并覆盖它，所以它看起来像它扩展的帖子，但事实上它只是被复制。

当其中一个变得更大时，如何使div成为网格状态？

2 个答案: