CSS:递增最高保证金 [英] CSS: Increment Top Margin

问题描述

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

I'm trying to stagger a div class in a stair type fashion, so it looks like this

1
 2
  3
   4

我想更改上边距，以便.process div的每个位置都比它之前的位置低.我让它们漂浮起来，以便它们并排坐着，但我也希望每个div都比上一个更低.

I want to change the top margin so each placement of the .process div is lower than the one before it. I have them floated so they'll sit side by side, but I'd also like each div to sit lower than the last.

我试图使用nth-child，它当然只是在所有元素上添加了上边距，因为它开始从第一个元素开始计数，而只是将设置的边距添加到所有div上.我知道您可以使用CSS创建计数器，但是可以使用CSS来增加边距吗?

I attempted to use nth-child which, of course, just added the top margin to all of the elements because it started counting at the first element and simply added the set margin to all of the divs. I know you can create a counter using CSS, but can you increment a margin using 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>

推荐答案

由于您的元素集非常有限，因此可以使用复制粘贴:

Because you have a very limited set of elements it is okay to use 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; }

这篇关于CSS:递增最高保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！