HTML – CSS可以处理这种类似沙漏的情况吗？

我很难想到解决以下问题的方法.
让我先说明一下：

情况
我有26个项目(在这个例子中,一般来说这个数字是未知的..)但是一次只能看到12个..我也有一些导航元素(绿色框??)

紫色和绿色盒子的宽度是固定的,但紫色的高度可以根据内容而变化.

一切正常,我可以用css做.

我正在为我的物品使用无序列表(浮动物品),我指定了前两个< li>元素作为导航的元素.首先是左浮动,第二浮右.
这一切都有效,其余项目的流程介于两个绿色项目之间.

问题
但现在我需要绿色项目在第二行(或者如果该概念有帮助,则最后一行,因为只有两行)

我希望能够隐藏前X个元素并显示下一个X并且它们自己落在了位置上.

为了重新解释这个问题,我能否以某种方式定位一些元素(绿色元素)来控制它们的位置,但仍允许它们干扰来自新位置的流量？

我希望这很清楚.如果不问,我将提供尽可能多的信息.??.

我试过的东西没用

>移动具有负底边距或正顶边距的绿色项目.他们将离开他们的位置,但其他元素将不会填补他们的位置.
>使用绝对位置,但元素完全从流中移除,它们不会影响其他元素,因此它们与其他元素重叠.

[他们灰色的项目是隐藏的,我只是展示他们,所以你知道他们存在..]

一些代码可以帮助您入门