сетка изображений быстро падает на следующую строку.

Question

Я не могу сохранить сетку изображений от перехода к следующей строке при изменении размера. Я пробовал кучу различных оценок, в том числе используя теги DIV, а не span. Я думаю, что когда текст отбрасывает строку. Какие-нибудь идеи, что не так? Смотрите GIF, что проблема: imagejumpinggif

Вот фрагмент кода:

CSS:

.house { 
    width: 23%; 
    padding: 0; 
    margin: 0; 
    text-align: center; 
    float: left; 
    display: block; 
} 
.house_container { 
    @include span-columns(12); 
    text-align: center; 
    min-width: 100%; 
    overflow: hidden; 
    white-space: nowrap; 
    margin: 0 auto; 
} 
.house_illustration { 
    width: 100%; 
    padding: 3%; 
} 
li { 
    list-style-type: none; 
    text-decoration: none; 
} 
.label { 
    display: block; 
    text-align: center; 
    overflow: scroll; 
} 

HTML:

<div class="house_container"> 
    <span class="house"><img src="img/house1.gif" class="house_illustration"/> 
    <p class="label">0-2500 sq ft<br> $275 </p> </span> 
    <span class="house"><img src="img/house1.gif" class="house_illustration"/> 
    <p class="label">2501-3000 sq ft<br> $300 </p> </span> 

и т.д.

Answer 1

Похоже вторая строка попадает на второй интервал дома в верхнем ряду в то время как он изменяет размер. Если это проблема, это должно исправить:

.house:nth-child(4n+1){ clear:left; } 

https://jsfiddle.net/17e5asgk/