html - 如何将 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;
}  

我该如何修改它，以便如果我添加更多带有 icon1 类的 div，它们将在 max-height 时在新列中对齐 达到了吗？

Answer 1

我不确定 float:left 是否有效。根据我的经验，这会导致 div 标签并排添加，一旦它们到达父 div 的末尾，下一个标签将被添加到第一列的底部。他需要相反的@Jack

我建议使用 jquery 检查您的 div 标签的高度是否超过了父 div。如果是，则添加一个新的 div 并开始将您的 image-div 标签附加到带有 style="float:left"的新 div。因此，如果您的初始 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>