3

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

<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クラスにさらに sを追加すると、に達しicon1たときに新しい列に配置されるように、これを変更するにはどうすればよいですか?max-height

4

2 に答える 2

0

これはCSSの「複数列」で行うことができます。

デモ

ただし、これは依然として推奨候補であるため、最新バージョンのFirefox、Chrome、およびOperaでベンダープレフィックスを使用して機能させることができますが（いくつかの癖がないわけではありませんが） 、サポートは依然として非常に最小限です。

于 2012-09-17T19:46:03.717 に答える
0

float:left が機能するかどうかはわかりません。私の経験では、これにより div タグが並んで追加され、親 div の最後に到達すると、次のタグが最初の列の下部に追加されます。彼は反対の @Jack を必要とします

私が提案するのは、jquery を使用して、div タグの高さが親 div を超えているかどうかを確認することです。その場合は、新しい div を追加し、image-div タグを style="float:left" で新しい div に追加し始めます。したがって、最初のDOMに含まれている場合

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

1 つの要素を追加すると、DOM が次のように変更されます。

<div class="icons" >
    <div class ="column" style="float:left"> 
       <div class="icon1" > <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 class="icon2" > <img src="" height="" width="" /> </div>
    </div>
</div>

親divを超える3番目の要素を追加すると、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>
于 2012-04-26T06:42:31.690 に答える