如何使用 CSS 创建基于 int 值的动态水平规则？答案

【问题标题】：How to create a dynamic horizontal rule based on an int value using CSS?如何使用 CSS 创建基于 int 值的动态水平规则？
【发布时间】：2017-04-24 03:48:57
【问题描述】：

我正在尝试在 MVC 项目中创建类似于图像的东西。

当我从模型中获得飞行持续时间时，

我想显示描述持续时间的线条，但我似乎无法理解如何动态执行此操作。 Flight Duration

【问题讨论】：

标签： jquery css asp.net-mvc

【解决方案1】：

创建一个 div 元素，高度：3px，背景颜色：黑色，并将其宽度设置为 int 值。

CSS：

.duration-line{
  background-color: black;
  height: 3px;
}

Javascript：

$('#container').append('<div class="duration-line" style="width: ' + duration + 'px"></div>');

【讨论】：

谢谢，我想我可以使用它。但持续时间将是 6 小时或 3 小时或类似的时间。我不能有一条 3px 的线。所以我需要将整个盒子作为固定宽度 100% 然后根据它进行拆分。有什么建议吗？
它只是数学。让我们假设： - 线条的空间是 200px 宽 - 你在旅途中有 2 条腿，一条 6 小时和一条 12 小时将第 1 条腿的宽度设置为 (6 / (6+12)) * 200 = 66.6 像素设置第 2 条腿的宽度到 (12 / (6+12)) * 200 = 133.3px
有很多方法可以做到这一点......您只需对持续时间应用某种数学因素。

【解决方案2】：

使用输入类型范围

$('#container').append('<input type="range" disabled id="myRange" min="0" max="6" value="3">');

【讨论】：

是的，你需要设置一个最大值和一个值，并按照你想要的样子来设置它的样式
如果我的问题不清楚，我很抱歉。输入类型范围将需要不改变的最大宽度和由“值”控制的滑块。我正在寻找一种动态设置最大宽度的方法，类似于范围控件。
你的意思是这样的？ getbootstrap.com/components/#progress

【解决方案3】：

我认为你可以简单地这样做

.duration-line{
  background-color: black;
  height: 3px;
  width: @(Model.Duration)px;
}

【讨论】：