1

要素を#comments含む.comment要素があります。左から右に5本の垂直線があり、それぞれ幅1ピクセル、高さ100％（#comments要素の終わりまで）で、間に20ピクセルあり、画像はありません。自分でやろうとしましたが、CSS-fuはそれほど高くありません。どんな助けでも大歓迎です。

HTML：

<div id="comments">
    <div class="comment level1">Lorem ipsum dolor sit amet</div>
    <div class="comment level2">Lorem ipsum dolor sit amet</div>
    <div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>

CSS：

#comments {
    width: 400px;
    border: 1px solid black;
}
.comment {
    margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }

デモ。

これが私がそれを想像する方法です：

|[comment      ]
|  |[comment   ]
|  |[comment   ]
|  |  |[comment]
4

1 に答える 1

1

すべてのdivを外側の親divの直接の子として持つ必要がある理由はありますか？divをネストすると、これを非常に簡単に実行できます。

css：

div div {
    border-left: 1px solid black;
    padding-left:20px;
}

ネストされたhtml

<div id="comments">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet
        <br/>
        <div>Lorem ipsum dolor sit amet
            <br/>
            <div>Lorem ipsum dolor sit amet
                <br/>
                <div>Lorem ipsum dolor sit amet</div>
                <div>Lorem ipsum dolor sit amet
                   <br/>
                   <div>Lorem ipsum dolor sit amet</div>                
                </div>
            </div>
        </div>
    </div>
</div>

5つのレベルにネストされたここでどのように見えるかを示す更新されたフィドル：

http://jsfiddle.net/webchemist/tuZB6/4/

于 2012-12-09T10:54:38.873 に答える