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