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%），那么您将获得您想要的内容。

百分比取决于列数

2 个答案: