根据列数划分百分比答案

【问题标题】：Division of percentage dependent on number of columns根据列数划分百分比
【发布时间】：2012-08-16 19:06:29
【问题描述】：

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

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

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

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

etc

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

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

【问题讨论】：

标签： css compass-sass sass

【解决方案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%），您将得到您想要的。

【讨论】：

感谢您的回复。我真的不认为这比我目前拥有的更有用。似乎也无法让 display: table 方法工作，我错过了什么吗？ jsfiddle.net/c4BZT
我试过你的小提琴，但对我来说它有效。你用什么浏览器？
将width: 1% 添加到你的小提琴中的li，那么它也应该在chrome中工作。

【解决方案2】：

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

【讨论】：

是的。 scss 还支持数学运算 - 但 sass 和 less 是预处理器，因此在获得 data-column 的值之前先进行数学运算（例如），所以这是行不通的。我正在寻找仅适用于 css / scss 的解决方案。
抱歉，没有注意到您使用的是 scss。不过，我强烈建议您为此使用 Javascript。