Деление процента в зависимости от количества столбцов

Question

Я устраиваю гистограмму. Есть потенциально неограниченные бары и мне нужно их каждый иметь пропорциональную ширину родительским container- В настоящее время у меня есть что-то вроде:

.one-column { 
    width: (100%/1); 
} 

.two-columns { 
    width: (100%/2); 
} 

.three-columns { 
    width: (100%/3); 
} 

etc 

... который я бы добавить к каждой строке.

Может кто-нибудь подумать об умном способе обойти это и просто иметь одно правило, которое может обрабатывать неограниченные столбцы - возможно, что-то связано с атрибутом данных?

Answer 1

С некоторыми хитрыми комбинациями CSS3 селекторов вы могли бы узнать, сколько колонка в использовании и в зависимости от этого стиля ширин контейнеров:

div:first-child:last-child { 
width: 100%; 
} 
div:first-child:nth-last-child(2), div:last-child:nth-first-child(2) { 
width: 50%; 
} 
div:first-child:nth-last-child(3), div:first-child:nth-last-child(3) ~ div { 
width: 33.33%; 
} 
div:first-child:nth-last-child(4), div:first-child:nth-last-child(4) ~ div { 
width: 25%; 
} 

Как вы можете видеть, вам все равно нужно добавить правило для каждого возможного количества div, но вам не нужно больше определять, сколько divs есть и соответственно установить классы.

Но есть и другое возможное решение в вашем случае. Вы можете использовать display: table, display: table-cell и т. Д. На divs и родительский элемент соответствующим образом. Затем, если вы установите ширину родительского объекта в 100% и ширину контейнеров на все одинаковое значение (например, 1%), вы получите именно то, что хотели.

Answer 2

Посмотрите на LessCSS - он поддерживает математические операции. В противном случае я бы рекомендовал вам использовать Javascript для обработки стилей ваших баров. Возможно, используйте графическую библиотеку, такую ​​как Raphael?