css динамическая ширина дочерних элементов в родительском контейнере

Question

При программировании набора элементов div рядом друг с другом я столкнулся с проблемой. Ситуация такова.

Как вы можете видеть на примере изображении есть количество дивы штабелирования рядом друг с другом (красный, зеленый ан оранжевых блоков). Они живут внутри контейнера с фиксированной шириной. Каждый раз, когда перезагружается страница, есть разные количество цветных div. Как я могу распределить их равномерно в контейнере? (пустое пространство справа ...) Я хотя и вычисляю процентное соотношение ширины (то есть 21.14%), используя php и устанавливая его для элементов. Это, похоже, работает в Firefox, но это не в IE или сафари/хром. Я думаю, что это имеет какое-то отношение к IE и webkit не удается назначить ширину i.e 21.5 px?

Возможно ли это? И как?

Спасибо!

Answer 1

попробовать это:

#parentdiv{ 
    display: table; 
} 
.childrendiv{//give children divs the same class 
    display: table-cell; 
    width: auto; 
} 

jsfiddle