3列のレイアウトに項目のリストを入力

Question

3列のレイアウトで表示するボックスのリストがあり、それぞれの数字が固定のボックス（div）を表す以下のようなものを実現したいとします。幅。そうする

1 2 3 
    4 5 6 
    7 8... 

一つの方法は、ページ上の3つの列があり、最初のリスト項目1つの4 7及び第二のリストが含まれてい3つのリストにオブジェクトを分割することであろう含有項目2 5 8等と各列に各リストを送ります。

問題は私のページが動的であり、アイテムが削除されて作成され、アイテムが自動的に再配置されるようにすることです（たとえば、5が取り出され、6が5の位置に、7が6の位置...）

CSSでこれを行う方法はありますか？ありがとう！

Answer 1

フレックスはあまりにも助けることができる：（動作をテストするために、次を削除するために、任意の李ホバー）が

ul { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    margin:20px; 
 
    padding:20px; 
 
    justify-content:center; 
 
    background:gray; 
 
} 
 
li { 
 
    width:30%; 
 
    border:solid; 
 
    margin:1em 1%; 
 
    background:white 
 
} 
 
/* demo purpose */ 
 
li:nth-child(even) { 
 
    color:green; 
 
} 
 
/* remove one li */ 
 
li:hover + li { 
 
    position:absolute; 
 
    top:-9999px 
 
} 
 

 
li { 
 
    counter-increment:linbr; 
 
} 
 
li:before { 
 
    content:counter(linbr); 
 
}

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

Answer 2

はい、ちょうどdisplay:inline-block;またはfloat:left;

あなたはこのように行うことができます。このjsfiddle

Answer 3

参照してください使用します。私はそれが動作表示するスクリプトを作った

ul { padding-left: 0;} 
li { float: left; width: 30%; list-style: none; background: red; color: #fff; margin: 1%; } 

See it here

をリスト内のランダムliを削除したとき。