Горизонтальные Изображение Clear

Question

Я не могу получить эти миниатюрные изображения в стек по горизонтали и очистить текст здесь:

http://svgcuts.com/blog/2016/04/09/fairy-cottage-svg-kit/

Я могу добавить поплавком: слева в строке:

191 .entry .ngg-galleryoverview .ngg-gallery-thumbnail img {float: left;} 

Но текст ниже держится вокруг контейнеров.

Answer 1

Если вы проверите ngg-galleryoverview в инструментах разработчика, вы увидите, что он рухнул, когда вы плаваете его дети. (Не иначе: он больше не тянется, чтобы содержать их.) Самый быстрый способ, чтобы исправить это, если вы хотите, чтобы плавать детей добавляет:

.ngg-galleryoverview { 
    overflow: hidden; 
} 

.ngg-gallery-thumbnail-box { 
    float: left; 
} 

Answer 2

Предполагая, что это ваш сайт, вы можете использовать flexbox для достижения того, чего хотите.

Я заметил, обертку для эскизов и придумал код:

.entry .ngg-galleryoverview { 
    padding: 0px !important; 
    margin: -15px 0px 30px 0px; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

Обратите внимание, что я просто добавил:

display: flex; 
flex-direction: row; 
flex-wrap: wrap; 

---

Это хорошо работает для меня:

---