CSS에서 항목의 세로 목록을 만드는 방법은 무엇입니까?

Question

항목 목록이 있고 div에 넣었다고 가정 해보십시오. 목록이 동적으로 생성되고 항목 수가 알려지지 않습니다.

CSS: 
div#container { 
    width:500px; 
} 
div.item { 
    width:150px; 
    float:left; 
} 

HTML: 
<div id="container"> 
    <div class="item">item 1</div> 
    <div class="item">item 2</div> 
    <div class="item">item 3</div> 
    . 
    . 
    . 
</div> 

브라우저 출력 보이는 같은

항목 항목 1 2 3 항목
항목 항목 4 5 6 항
. . . . . .

항목 1 개 항목 4
항목 2 항목 5
항목 3 항목 6
:

방법과 같이 수직 열을 생성한다. . .

Answer 1

@B 세븐; 이 경우 css3column-count 속성을 사용할 수 있습니다. 예를 들어

: 그것은 IE에서 작동하지 않습니다 : 데모 http://jsfiddle.net/sandeep/pMbtk/

참고 Div's in two columns

에 대한

#multicolumn1 { 
     -moz-column-count: 2; 
     -moz-column-gap: 50%; 
     -webkit-column-count: 2; 
     -webkit-column-gap: 50%; 
     column-count: 3; 
     column-gap: 50%; 

} 

확인이 링크.

Answer 2

이러한 유형의 정렬에서는 항목을 배치하기 전에 항목 수를 알아야하므로 첫 번째 열에 넣을 항목의 수를 알 수 있습니다.

두 번째 div (예 : $ ('# seconddiv'))로 바꾸기 위해 두 개의 div, 왼쪽 및 오른쪽으로 띄우고 줄 바꿈을 사용하여 다른 항목 아래에 항목을 추가합니다.)

또는 당신이 각 항목에 대한 몇 가지 종류의 처리가 필요하면, 테이블을 사용하여 자신의 div의 또는 스팬, 또는 셀 그럼 당신은 그 스타일을 할 수 있으며 개별적으로 클릭

Answer 3

에 넣어 것입니다...

한 번 더 한 당신은이 링크를 확인하실 수 있습니다 CSS3

를 사용하여 자신의 솔루션을 사랑하기 Sandeep 에 :,Check this

Answer 4

CSS :

.tableDiv, 
     .rowDiv 
     { 
      width:400px; 
      float:left; 
     }  
     .clDiv200 
     { 
      width:200px; 
      float:left; 
     } 

HTML :

<div class="tableDiv"> 
     <div class="rowDiv"> 
      <div class="clDiv200">Item 1</div> 
      <div class="clDiv200">Item 4</div>   
     </div> 
     <div class="rowDiv"> 
      <div class="clDiv200">Item 2</div> 
      <div class="clDiv200">Item 5</div>   
     </div> 
     <div class="rowDiv"> 
      <div class="clDiv200">Item 3</div> 
      <div class="clDiv200">Item 6</div>   
     </div> 
    </div> 

이 모든 브라우저 확인에서 작동합니다 .. 항목의 수를 알 수없는 때문에