html - CSS：增加上边距

Question

我正在尝试以楼梯类型的方式错开一个 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>

Answer 1

您是否考虑过更改标记？

<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>

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

Answer 2

因为您的元素集非常有限，所以可以使用复制粘贴：

http://jsfiddle.net/C4TWc/1/

HTML：

<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>

CSS：

div {
    float: left;
    width: 20%;
}

div:first-child + div { margin-top: 2em; }
div:first-child + div + div { margin-top: 4em; }
div:first-child + div + div + div { margin-top: 6em; }
div:first-child + div + div + div + div { margin-top: 8em; }
div:first-child + div + div + div + div + div { margin-top: 10em; }

Answer 3

另一种可能的方式（很容易中断）：

http://jsfiddle.net/C4TWc/2/

HTML：

<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>

CSS：

div {
    display: block;
}

div ~ div:before {
    content: '';
    width:  20%;
    height: 2em;
    float: left;
}