CSS: 增加顶部边距

Question

我想把一个 div class 分阶段地错落排列，使其看起来像这样：

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>

- Alina

---

OK。nth-child选择器只允许选择父元素的第n个子元素，并允许您对它们应用通用规则。换句话说，它不允许您将n * 1em边距应用于元素。 - Mike Brant

好的，我现在会使用JavaScript并进行更多的研究。希望这里可能有人知道一种方法。 - Alina

@biziclop 没错。我一直在尝试使用放置来复现它，但到目前为止我还没有成功。 - Alina

您对块的数量有上限吗？ - biziclop

不好的例子：http://jsfiddle.net/C4TWc/ 更好的例子：http://jsfiddle.net/C4TWc/1/ - biziclop

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>

那种标记似乎更适合这项工作（考虑到你想要的分层结构）。

- Madara's Ghost

---

不，我没有考虑过使用嵌套列表，但这绝对是一个我可以使用的解决方案。 - Alina

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

- biziclop

---

是的，你那个解决方案非常通用，而且你只需要 <number of divs> 个 CSS 规则就可以实现它！（如果我听起来有点吝啬，对不起，但说真的，那个解决方案在长期内会出现严重问题）。 - Madara's Ghost

没错，但是OP想要布局确切的5个元素。 - biziclop

今天，明天他可能想要42。 - Madara's Ghost

今天、明天和后天，我只需要5个元素。这是一个不变的集合部分，未来也不会在不重新设计为不同布局的情况下发生变化。我会保存你的版本，@Truth，因为我有另一个部分需要多个阶段，其中包含未知数量的元素。我会在那里使用你的版本。 - Alina

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

- biziclop

---

我发现它很容易出问题。我会坚持你给我的另一个解决方案。 - Alina

Answer 4

有几种替代方法的建议，但对于您最初的问题的答案是“否”。CSS计数器是旨在在Content属性内使用的函数。来源

此外，CSS变量和属性通常没有增量功能，除非得到帮助。如果您想要一个适用于不确定数量的div的可重用解决方案，则最好使用SASS或JavaScript。

- JimmyB