如何在百分比宽度非常小的段之间渲染 1px 的装订线？

Question

我正在创建一个 UI 控件。它是一个条形图，根据输入以相对比例显示彩色区域。一些要求是颜色之间有 1px 的间距，并且无论相对宽度有多小，每种颜色都必须至少显示 1px。

栏看起来像这样：

使用pocketgrid documentation 描述的技术放置排水沟：

.threshold-container {
    height: 8px;

    $threshold-horiz-gutter: 1px;

    &.block-group {
        margin-left: -$threshold-horiz-gutter;
    }

    .threshold {
        height: 100%;
        min-width: 2px;

        &.block { 
            padding-left: $threshold-horiz-gutter; 
        }

        .colored-area {
            height: 100%;
            width: 100%;
        }

    }

}

这里有一个 codepen，它提供了一个工作示例：http://codepen.io/ghoti143/pen/eZNXVW

我面临的问题是，当任何一种颜色的相对比例足够小时，最后一个颜色区域会换行到下一行，看起来像这样：

要复制此问题，请访问 codepen 项目并将其作为阈值数组值输入：

[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]

在这种情况下，LightGreen 区域的宽度样式为 0.33333%。这相当于 0.495 像素，条宽为 150 像素。但是，由于要求始终为每种颜色显示至少 1px 的宽度，因此 LightGreen 区域占用了 2px 的宽度（1px 内容 + 1px 填充）。

感谢您提供的任何见解！

Answer 1

您可以使用 css calc 函数从每个部分的宽度计算中减去 1px 的边距。 [例如]http://codepen.io/anon/pen/ZWGNVY

coloredAreas.push({
  color: thresholds[i].color,
  width: 'calc(' + width + '% - 1px)'
});