CSS가있는 세로선

.comment 요소를 포함하는 #comments 요소가 있습니다. 왼쪽에서 오른쪽으로 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; }

Demo.

|[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 단계까지 중첩 어떻게 보일지 보여주는 업데이트 바이올린 :

출처

2012-12-09 10:54:38 WebChemist

실제 디자인에서는 ma 이 함수는'.comment' 요소 사이에 수직선을 그려 내지 않습니다. – daGrevis

이것은'.comment' 요소에 대한 경계선으로 얻을 수있는 최선의 방법입니다. http://i.imgur.com/Qy1qW.png – daGrevis

오, 방금 구조 요소가있는 방법을 얻었습니다 ... 작동 할 수도 있습니다! 감사! :) – daGrevis

CSS가있는 세로선

답변

관련 문제