Question

我试图以阶梯式方式错开div类，所以它看起来像这样

编辑：我想更改上边距，以便.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

因为你有一组非常有限的元素，所以可以使用copypasting：

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

CSS：增加最高保证金

3 个答案: