css - 根据列数划分百分比

Question

我正在设计一个条形图。可能有无限的条，我需要它们每个都具有与其父容器成比例的宽度 - 目前我有类似的东西：

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

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

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

etc

...我会添加到每个栏。

谁能想到一种巧妙的方法来解决这个问题，并且只有一个可以处理无限列的规则——也许与数据属性有关？

Answer 1

看看LessCSS - 它支持数学运算。否则，我建议您使用 Javascript 来处理条形的样式。也许使用像Raphael这样的图形库？

Answer 2

通过一些复杂的 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 数量添加规则，但您不再需要检测有多少 div 并相应地设置类。

但在您的情况下，还有另一种可能的解决方案。您可以以适当的方式在 div 和父元素上使用等display: table。display: table-cell然后，如果您将父项100%的宽度和容器的宽度设置为所有相同的值（例如1%），您将得到您想要的。