...">
Geek asks and answers

How to align a div automatically in a new column

I have a list of displayed icons. For this, I use the following layout:

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

This is the CSS I use:

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

How can I change this so that if I add more divwith the class icon1, they will be aligned in a new column when it is reached max-height?

+3
source share
2 answers

I'm not sure if float: left will work. In my experience, this leads to div tags being added side by side, and as soon as they reach the end of the parent div, the next one will be added to the bottom of the first column. It requires the opposite @Jack

jquery, , div div. div image-div div = "float: left". , DOM

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

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, 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>
0

CSS 'multi-columns',

- , support - , , ( - ) Firefox, Chrome Opera.

0

More articles:


All Articles