html - "Stair-step"带有 CSS 的兄弟元素

Question

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

含义:

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

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

我正在使用这样的标记:

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

通过流动，我的意思是无论我在步骤中有多少元素，它都会起作用 - 所以没有每个单独元素的绝对定位，或者使每个元素具有逐渐增加的边距(除非有某种方法可以做到永远在我不知道的CSS中)。

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

固定尺寸​​也可以，但首选灵活尺寸。

我有一个 pen going here , 但还没有成功。

Answer 1

感谢@Banzay 提供的链接，我使用 float 的子元素解决了这个问题，并为内容添加了另一层包含作为内联 block 元素。

*{border-width:0;margin:0;padding:0;box-sizing:border-box;}

#con{
  margin:50px;
  background:#acc;
}
#con>div{
  position:relative;
  background:#ccd;
  height:50px;
}
#con>div:before {
    float: left;
    content: "\00a0";
    width: 50px;
    height: 51px;
}
#con>div>div{
  display:inline-block;
  height:50px;
  width:50px;
  background:#000;
  color:#fff;
}

<div id="con">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>  
  <div><div>4</div></div>  
  <div><div>5</div></div>  
</div>