CSS：增加上边距

我正在尝试以楼梯类型的方式错开 div 类，所以它看起来像这样

1
 2
  3
   4

编辑：我想更改上边距，以便 .process div 的每个位置都低于之前的位置。我让它们浮动，这样它们就可以并排坐着，但我也希望每个 div 都比上一个更低。

我尝试使用nth-child当然，它只是将上边距添加到所有元素，因为它从第一个元素开始计数，并将设置的边距添加到所有 div。我知道你可以使用 CSS 创建一个计数器，但是你可以使用 CSS 增加边距吗？

CSS

.process {
    float: left;
    width: 20%;
}

.process:nth-child(1n+2) {
    margin-top: 1em;
}

HTML

<!-- #dprocess -->
<div id="dprocess">


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


<!-- /#dprocess -->
</div>

您是否考虑过更改标记？

<div>
    1
    <div>
        2
        <div>
            3
            <div>
                4
                <div>
                    5
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    div {
        margin-left: 10px;
    }
</style>

该标记似乎也更适合这项工作（考虑到您想要的层次结构）。