6

階段型のやり方でdivクラスをずらそうとしているのでこんな感じ

1
 2
  3
   4

編集: .process div の各配置がその前のものよりも低くなるように、上マージンを変更したい。私はそれらを浮かせて並べて座らせますが、各 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>
4

3 に答える 3

5

マークアップを変更することを検討しましたか？

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

そのマークアップは、その仕事にも適しているようです（必要な階層構造が与えられた場合）。

于 2012-07-26T19:16:19.147 に答える
1

別の可能な方法（非常に簡単に壊れます）：

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;
}
于 2012-07-26T19:29:22.003 に答える
1

要素のセットが非常に限られているため、コピーペーストを使用しても問題ありません。

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; }
于 2012-07-26T19:18:44.540 に答える