Javascript 页边距之间自动对齐div onclick

我试图创建一个产品列表，里面有一个隐藏的div。 当我点击产品时，隐藏的div会打开并显示详细信息

正如您可以从中看到的，单击最后一个隐藏的div时，会在页边距外打开

jQuery打开隐藏的div

function activateDropdown(entry_id) {
    $(".box-dropdown").hide("slow");
    $("#box-dropdown-" + entry_id).show("slow");
}

有没有一种方法可以根据利润率“调整”it？（站点是响应性的，因此减少视口的绿色div也可以是3或2…）

更新：

• 我希望打开时隐藏的方块应该是4x4。它必须在其他3个分区之上。更新

• 隐藏的div必须从左到右打开，但显然，对于最后一个正方形，它必须从右到左打开

只需使用此css

   #box .box-dropdown {
            display: none;
            width: 100%;
            height: 100%;
            background: #ffffff;
            position: absolute;
            z-index: 5;

        }

更改：

width:100%;
height:100%;

您需要进行2项更改：

第一个更改，设置从右到左打开的div的行为方式，如果是固定的div，我建议使用第n个子（4n）类型的属性

#box-dropdown-4{
    right:0;
}

然后，在JS中为将从右向左打开的

div

s设置一个条件，同样，如果始终是第四个div，请使用类似于

entry\u id%4==0的内容来识别

if (entry_id != 4) {
        $("#box-dropdown-" + entry_id).show("slow");
    } else {
        $("#box-dropdown-" + entry_id).show('slide', {
            direction: 'right' /* decide slide direction, yeah, its that simple :) */
        }, 20000);
    }

大多数小鬼注意：我不是JS人，所以动画不流畅：）
谢谢你的回答。在我的问题中，我遗漏了一个规格，我希望打开时隐藏的方块应该是4x4。它必须位于其他3个位置之上。检查更新的演示：@Mark:你检查过了吗/有没有办法让它自动化？例如，正如我在第一个问题中所写的（该站点是响应性的，因此减少视口中的绿色div也可能是3或2…），如果在该位置我找到了第三个，我必须逐个解决。因此，您希望窗口打开一个到
左
或从
左到右
？更新了问题，谢谢您的提问！