Проблема с расположением элементов div подряд ⇐ CSS

[Anonymous]

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







внутри большего div (.productionList)
но, что бы я ни пытался, каждый из них получает свою собственную строку:
[img ]

[прогресс]

[img]

[прогресс]

...хотя я хочу, чтобы это выглядело так:

[---img--][---img--][---img--][-- -img--][---img--][---img--]...

[прогресс][прогресс][прогресс][прогресс][прогресс][прогресс] ...

(обернуть по достижении конца контейнера)

[---img--][---img--]

[progress][progress]
Вот как выглядит мой CSS-код:
.productionList {
border: 1px solid white;
width: 100%;
}

.productionList div {
width: 40px;
}

.productionList div img {
width: 100%;
}

.productionList div progress {
width: 100%;
}


есть идеи, что происходит или как это исправить?
для воспроизведения


.productionList {

border: 1px solid white;

width: 100%;

}

.productionList div {

width: 40px;

}

.productionList div img {

width: 100%;

}

.productionList div progress {

width: 100%;

}




















Подробнее здесь: https://stackoverflow.com/questions/791 ... s-in-a-row