Как сделать divs переходить в другую строку при заполнении?

Question

Мой код выглядит примерно так. Когда theres 3 изображения все прекрасно после того, как theres 4 он заполняется и перемещает весь div.top в другую строку. Как заставить div внутри вершины вместо этого запускать новую строку?

Я пробовал писать .top width = 500px, но как только он попадает или пропускает его, вместо изображений внутри сжимаются вместе, а не каждый 150x150. Я попробовал max-width сверху, а в opera и chrome я вижу границу сверху как 500width, но изображения продолжают выдавать ее. (у меня проблема с firefox с моим div, поэтому ширина выглядит привязанной к чему-то еще).

Итак, как мне заставить эти divs перейти в другой ряд? и не пытайтесь сжать вместе

<div class="top"> 
<div><a href><img/></a></div> 
<div><a href><img/></a></div> 
<div><a href><img/></a></div> 
</div> 

Answer 1

Вот решение, которое могло бы помочь (использовал его в моем примере, просто настроить, чтобы соответствовать вашему примеру)

.top { 
    display: block; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 

.top div { 
    float: left; 
    display: block; 
    margin-right: 5px; 
    margin-bottom: 10px; 
    width: 47%; /* Not needed, but in my case I needed 2 columns */  
} 

Basicall, то .top divfloat: left; - это то, что делает мои изображения для перехода к следующей строке, если столбцы заполнены.

Answer 2

Мне может понадобиться дополнительная информация здесь, трудно точно сказать, что происходит. Возможно, экранный снимок?

я бы, вероятно, начать с чего-то вроде этого:

.top { 
    width: 500px; 
    overflow: hidden; 
} 

.top div { 
    display: inline; 
    float: left; 
    width: 150px; 
    height: 150px; 
}