Как сделать так, чтобы элементы div попадали в другой ряд при заполнении?

Question

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

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

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

<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 {
  width: 500px;
  overflow: hidden;
}

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

Answer 2

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

.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 div float: left; - это то, что заставляет мои изображения переходить в следующий ряд, если столбцы заполнены.