根据列数划分百分比

Question

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

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

但在您的情况下，还有另一种可能的解决方案。您可以以适当的方式在div和父元素上使用display: table、display: table-cell等。然后，如果您将父对象的宽度设置为100%，并将容器的宽度设置为所有相同的值(例如1%)，您将获得所需的内容。

Answer 2

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