これはリストで可能ですか？ <img src="https://i.stack.imgur.com/d7eAr.png" alt="make list like this"></p> <p>または私はちょうど同じことを達成するためにdivタグを使用する必要があります。その可能性は、このようなリストを作成する場合

Question

私は思ったんだけど？

Answer 1

のようなリストを取得するために、純粋なCSS（フロート）とpossbileです：

LI1 LI2 
LI3 LI4 
LI5 LI6 

が、取得するには：

LI1 LI4 
LI2 LI5 
LI3 LI6 

あなたがjavascriptや2リストを使用する必要があるだろうCSSのスタイリング。にあなたの幅、余白とパディングを調整

ul { width:400px; overflow:hidden; margin:0; padding:0; } 
li { width:200px; float:left; margin:0; padding:0; } 

を：次のようになり、私の最初のシナリオのため

CSSを：（EDIT cale_bによって別の答えは言及してか、最近のブラウザのためにあなたはcolumn-countを使用することができます）あなたの好みはもちろん

Answer 2

確かに。アイテムが最初に列内を流れなければならないか、または左から右へ流れることができるかによって異なります。左から右への場合

はOKです、ただディスプレイを割り当てる：ブロック、フロート：左、とのli要素に幅：

li { 
    display: block; 
    width: 150px; 
    float: left; 
} 

それは最初に流下するためにあなたが探しているのであれば、その後、右に、そしてCSS3の列数を含む最近のブラウザのためのいくつかの技術は（だけ現代のブラウザで動作します）があります。

ul { 
    -moz-column-count:2; /* Firefox */ 
    -webkit-column-count:2; /* Safari and Chrome */ 
    column-count:2; 
} 

あなたの第三の選択肢は二つのリストを並べて使用することであろう、

あるいは、あなたが言及したように、divs。

Answer 3

私はあなたができると思いますが、それぞれのリストが2つあり、それぞれがうまくいくと思います。

Answer 4

リストで簡単に可能です。やってみました？

これはCSSの問題です。暗闇の中で

刺し：

ul { list-style: none; width: 400px; background: #eee; } 
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; }​ 

<ul> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
</ul> 

Demo here