如何在宽度非常小的线段之间渲染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项目并将其输入为Threshold Array值：

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

在这种情况下，LightGreen区域的宽度样式为0.33333％。这相当于条带宽度为150px时为0.495px。但是，由于要求每种颜色始终显示至少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)'
});