divを自動的に新しい列に揃える方法

Question

表示するアイコンのリストがあります。私はこれを行うには、次のレイアウトを使用しています：

<div class="icons"> 
<div class="icon1"> 
img src="someimage" <p>Some test </p> 
</div> 
. 
. 
. 
</div> 

これは私が使用していCSSです：

.icons{ 
    margin-top:5px; 
    margin-left:5px;  
    left:0;   
} 
.icon1{  
    line-height:15px; 
    margin-top:8px;  
    width:75px; 
} 

ように、私はより多くのdiv秒を追加した場合、どのように私はクラスでこれを修正しないicon1を彼らがmax-heightに達したときに新しい列に配置されますか？

Answer 1

float：leftが機能するかどうかは不明です。私の経験では、divタグを並べて追加し、親divの終わりに達すると次のdivタグが最初の列の最後に追加されます。彼は反対側の@Jackを要求します

あなたのdivタグの高さが親divを超えているかどうかを確認するためにjqueryを使用しています。それらが新しいdivを追加し、style = "float：left"で新しいdivにimage-divタグを追加し始めます。このように、あなたの最初のDOMが含まれている場合は別の要素が親を超える第三の要素を追加する

<div class="icons" > 
    <div class ="column" style="float:left"> 
     <div class="icon1" > <img src="" height="" width="" /> </div> 
     <div class="icon2" > <img src="" height="" width="" /> </div> 
    </div> 
</div> 

にそれを変更する必要があります追加

<div class="icons" > 
    <div class ="column" style="float:left"> 
     <div class="icon1" > <img src="" height="" width="" /> </div> 
    </div> 
</div> 

にDOMを変更する必要があります一つの要素を追加する

< div class="icons" > </div> 

divはDOMをこれに変更します

<div class="icons" > 
    <div class ="column" style="float:left"> 
     <div class="icon1" > <img src="" height="" width="" /> </div> 
     <div class="icon2" > <img src="" height="" width="" /> </div> 
    </div> 
    <div class ="column" style="float:left"> 
     <div class="icon3" > <img src="" height="" width="" /> </div> 
    </div> 
</div> 

Answer 2

あなたはCSS 'multi-columns'でこれを行うことができ、

demo

いますが、ではないが（それが作業を取得するために、ベンダープレフィックスを使用することができるにもかかわらず、非常に最小限まだCandidate Recommendationので、supportはまだですFirefox、Chrome、Operaの最新バージョンにはいくつかの癖がありません）。