CSSでアイテムの垂直リストを作成するには？

Question

あなたがアイテムのリストを持っていて、それらをdivに入れるとします。リストは動的に生成され、項目数は不明です。

項目1つの項目2項目3
項目4項目5項目6
：

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つの項目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

このタイプの配置では、配置する前にアイテムの数を知る必要があるため、最初の列に配置するアイテムの数を知る必要があります。

2番目のdivに挿入するように切り替える（たとえば、$（ '＃seconddiv'））append（ 'Item 4' ）;

または私はテーブルを使用すると思いますが、各項目の上にいくつかの種類の取り扱いが必要な場合は、自分自身のdivまたはスパン、またはセルに入れて、あなたがそれらをスタイルすることができますし、それらを別々にクリック

Answer 3

。。。：

もう一回1 にサンディープはCSS3

を使用して、彼のソリューションを愛しまた、このリンクをチェックすることができます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> 

これは、すべてのブラウザOKで動作します。..アイテムの数が知られていないので