带CSS的垂直线条

2012-12-09 250 views 1 likes

我有一个#comments元素，其中包含.comment元素。我想从左到右有5条垂直线条，每条宽度为1px，高度为100％（直到#comments元素结束），它们之间有20px，没有图像。我试图自己做，但我的CSS-fu并不高。任何帮助将非常感激。带CSS的垂直线条

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]

来源

2012-12-09 daGrevis

回答

是有一些原因，你需要将所有的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-09 10:54:38 WebChemist

这对我不起作用，因为在实际设计中我有ma '.comment'元素之间的rgin，但是这个解决方案不会在那些空白处画垂直线。 – daGrevis

这是我可以获得w/border为'.comment'元素的最佳选择。 http://i.imgur.com/Qy1qW.png – daGrevis

哦，刚刚得到了你的结构化元素......它可能只是工作！谢谢！ :) – daGrevis

带CSS的垂直线条

回答

相关问题