在HTML / CSS的一行中的特定点上显示尺寸调整后的按钮

Question

我是HTML / CSS的新手，现在正在使用Django构建Web应用程序。

该应用程序从预先计算的数据库中提取数据。每个条目都有一定的长度，并包含几个子条目，每个条目的长度是父条目的整个长度的一部分。作为python字典，它看起来像这样：

{entry1: {'length': 10000, {child1}: {'start':1, 'end':1000 }, {child2}: {'start':2000, 'end':6000}, ...}

每个孩子的身高在这里都是起点。

我想做的是将每个条目显示为HTML / CSS中的一行，并且每个子条目都显示为该行上的按钮。该行上每个按钮的大小应反映其长度（这是父条目长度的一部分，但每个子条目的长度都不同）。重要的是，每个子条目在父条目上都有特定的位置（例如：父条目的长度为10000，子条目1的长度为1-1000，子条目2的长度为2000至6000，依此类推）

我想要得到的结果是这样的：

我想这样显示几十个条目，最终甚至将图形连接从一个条目显示到下面显示的一个条目。（假设从条目1，位置1200到条目2，位置400划了一条线）。

我设法将按钮放在HTML / CSS中的一行上，但是我不知道如何适当地调整每个按钮或如何将它们放在父行的正确位置。

任何人都可以将我指向可以帮助我实现这一目标的代码，库，方法，教程或其他内容吗？

Answer 1

这可以在纯CSS中完成。诀窍是使用CSS变量和calc()函数动态地计算宽度和凝视位置，占整个图的百分比。这使图形响应。

它是如何工作的

图是使用单个hr元素和可变数量的子节点构建的。节点绝对位于graph元素内部。节点的长度和位置是使用calc()函数计算的。

图形长度由--graph-length变量设置。
节点有两个变量--start和--end。

节点的宽度计算如下：

calc((var(--end) - var(--start)) / var(--graph-length) * 100%)

及其起始位置：

calc(var(--start) / var(--graph-length) * 100%)

在Django模板内部，用字典中的值替换硬编码的值。如果您可以像这样在字典中创建子列表：

graph = {'entry': {'length': 10000, 'children': [{'child': {'start': 1, 'end': 1000}}, {'child': {'start': 2000, 'end': 6000}}]}}

然后在Django模板中生成图形将很简单：

<div class="graph" style="--graph-length: {{ entry.length }};">
  <hr class="line">
    {% for node in entry.children %}
        <span class="node" style="--start: {{ node.child.start }}; --end: {{ node.child.end }};"></span>
    {% endfor %}
</div> 

calc((var(--end) - var(--start)) / var(--graph-length) * 100%)

calc(var(--start) / var(--graph-length) * 100%)