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