Как выровнять div автоматически в новый столбец

У меня есть список значков, которые будут отображаться. Я использую следующую схему, чтобы сделать это:Как выровнять div автоматически в новый столбец

<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?

источник

2012-04-26 Raj

Я не думаю, что это возможно только с помощью HTML и CSS – fesh

Добавить 'поплавок: left' в' icon1' – Jack

Раджа, там что-то главно не так с вашим 'img' тегом там ... – Xenon

Я не уверен, будет ли плавать: слева будет работать. По моему опыту это приводит к тому, что теги div добавляются бок о бок, и как только они достигают конца родительского div, следующий будет добавлен в нижнюю часть первого столбца. Он требует обратного @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>

источник

2012-04-26 06:42:31 DRAKO

приятно об этом, но то, что я пытаюсь, не использовать jquery или script, это возможно сделать с помощью CSS и HTML – Raj

Вы можете сделать это с помощью CSS 'multi-columns',

demo

, но это все еще Candidate Recommendation, поэтому support еще очень минимален, даже если вы можете использовать префиксы, чтобы заставить его работать (хотя и не без каких-либо причуд) в последних версиях Firefox, Chrome и Opera.

источник

2012-09-17 19:46:03 carpenumidium

Как выровнять div автоматически в новый столбец

ответ

Смежные вопросы