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 'multi-columns'来做到这一点，

演示

但它仍然是候选推荐，因此即使您可以使用供应商前缀使其在最新版本的 Firefox、Chrome 和 Opera 上运行（尽管并非没有一些怪癖），支持仍然非常少。

于 2012-09-17T19:46:03.717 回答
0

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

我建议使用 jquery 检查您的 div 标签的高度是否超过父 div。如果他们是然后添加一个新的 div 并开始将您的 image-div 标签附加到新的 div 与 style="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>
于 2012-04-26T06:42:31.690 回答