Html &引用；“楼梯踏步”；使用CSS的同级元素

如果没有JavaScript，是否可以创建元素的流动阶梯级联

意思是：

[1]
   [2]
      [3]
         [.]

对于任意数量的元素，依此类推

我正在处理类似这样的标记：

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

1.
2.
3.

通过流动，我的意思是，无论我在步骤中有多少个元素，它都会起作用——因此没有对每个元素的绝对定位，也没有使每个元素都有逐渐增加的边距（除非在css中有某种方法可以永久地这样做，我不知道）

此外，没有无限的子元素——一个可接受的解决方案可以在必要时混合更多的元素，但框不应该是彼此的子元素

固定尺寸也可以，但最好是灵活的

---

我确实有过成功，但还没有成功

如果您可以调整HTML，这里有一个想法：

我知道，它依赖于嵌套元素，而不是兄弟元素

.container{
位置：相对位置；
宽度：20px；
高度：20px；
}
.货柜组{
位置：绝对位置；
宽度：20px；
高度：20px；
边框：1px实心；
左：100%；
最高：100%；
}
.货柜部{
宽度：100px；
}
.货柜部{
高度：50px；
}

1.
2.
3.
4.
5.

多亏了@Banzay的链接，我使用了一个浮动的子元素，并将另一层包含作为内联块元素添加到内容中

*{边框宽度：0；边距：0；填充：0；框大小：边框框；}
#骗局{
利润率：50像素；
背景：#acc；
}
#con>div{
位置：相对位置；
背景：#ccd；
高度：50px；
}
#con>div:之前{
浮动：左；
内容：“\00a0”；
宽度：50px；
高度：51px；
}
#con>div>div{
显示：内联块；
高度：50px；
宽度：50px；
背景：#000；
颜色：#fff；
}

1.
2.
3.
4.
5.

假设这是动态生成的HTML，您可以利用服务器端语言来设置变量，并将它们与CSS中的

calc

函数一起使用

div{
边缘顶部：5px；
边框：1px实心#d0；
高度：25px；
背景色：#E0；
/*这是一条重要的路线*/
左边距：计算值（var（--缩进）*15px）；
}

不……不是。对不起，也许这个链接会有帮助，因为我觉得需求中的限制有点奇怪：你想在这里实现什么？如果没有绝对定位或利润，您计划如何创造这一差距？为什么没有Javascript？（这是XY问题吗？@Kaddath您可以使用其中任何一种，但不能逐步使用。例如：第n个子元素（1）边距为50，第2子元素边距为100，等等。因为您必须编写无限行css以覆盖无限多个框。基本思想是为

div创建
：在
元素之前。与div的
float:left
一起，
:before
'高度必须超过
div
的一点高度。。。。太棒了！我喜欢。呃。。。“盒子不应该是彼此的孩子。”@Paulie_D我知道：）这就是为什么添加了一个小通知。。。顺便说一下，它可以是动态的，具有不同的高度/wdith；）你明白了：）我也在玩浮子，但我没有找到窍门！顺便说一下，我编辑了我的答案，使之成为动态的高度宽度；）@兰迪·霍尔，你可以在这里投票支持我的暗示：）