在HTML/CSS中显示行上特定点上的大小调整按钮

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

此应用程序从预先计算的数据库中提取数据。每个条目都有一定的长度，并且包含几个子条目，每个子条目的长度都是父条目整个长度的一小部分。作为python字典，它如下所示：

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

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

每个孩子的长度都是从这里开始到结束

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

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

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

我已经成功地将按钮放置在HTML/CSS中的一行上，但是我不知道如何用适当的方式调整每个按钮，或者如何将它们放置在父行的正确位置

---

有人能告诉我代码、库、方法、教程或其他可以帮助我实现这一点的东西吗？

这可以用纯CSS完成。诀窍是使用CSS变量和

calc（）

函数动态计算宽度和起始位置，作为整个图形的百分比。这使得图形具有响应性

它是如何工作的 使用单个

hr

元素和可变数量的子节点构建图形。节点绝对位于图形元素内部。使用

calc（）

函数计算节点的长度和位置

图形长度用

--图形长度
变量设置。

节点有两个变量
--start
和
--end

节点的宽度通过以下公式计算：

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

其起始位置为：

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

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

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

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> 













你不需要图书馆或任何其他疯狂的东西。您只需要设置一些基本样式，然后通过Javascript修改
位置
和
宽度
属性

我会这样设置：

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

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

您需要HTML来匹配您的数据布局，所以让我们使用这些类。然后，我们将使用CSS创建对齐，使用javascript将所有内容放在正确的位置。我还建议计算一个百分比，这样你就可以有任何宽度线（父）


let数据={
“一个”：{
“左”：0，
宽度：20
},
“两个”：{
"左":25,，
“宽度”：5
},
“三个”：{
左:35,，
“宽度”：40
},
“四个”：{
左:80,，
“宽度”：5
}
}
var parentEl=document.getElementById（'parent'）；
Object.entries（data.forEach）（（项目，i）=>{
让道具=项目[1]
让el=parentEl.getElementsByTagName（“按钮”）[i]
//这些是数据中的百分比，如果它们是px，则需要转换
//startX/parentWidth*100和childW/ParentW*100
el.style.left=props.left+“%”
el.style.width=props.width+“%”
});
#父级{
/*给绝对位置一个锚*/
位置：相对位置；
/*留有空白以便更容易看到*/
利润率：50px 10px；
宽度：100%；
高度：1px；
背景颜色：棕褐色；
}
.孩子{
/*将其相对于直线定位*/
位置：绝对位置；
填充：0；
保证金：0；
最小宽度：1px；
/*将顶部置于线上方*/
前-50%；
转化：translateY（-50%）；
/* 
现在所有的按钮都堆叠在左边
我们将用javascirpt改变这个位置。
*/
}

1.
2.
3.
4.
乍一看，你的问题看起来比实际问题更复杂。诀窍是忽略您对Django的引用，类似eyecandy的线条和颜色，并将您的问题简化为：

给定父元素的（固定）宽度，在给定宽度的父元素中均匀分布子元素。


我们从数据库中获取
parent.width
，即
DjangoParentSizeValue
从数据库中，我们还知道要显示的元素的宽度：
djangowhighvalue-djangowvalue=child.width

Flexbox机制已经提供了一种分发子元素的方法，为什么不使用它呢：

父级：
显示：flex
=>默认为1:N列的无换行flexbox行

Child：
flex-grow:'javascript-computed'=>high-low=value
。没错，忽略CSS
width
值，只需设置CSS
flex grow
值

flex grow
value>0表示允许元素在父元素内部增长。它通常为0或1（无增长=默认值/增长），但可以有任何值。给子元素一个根据Django数据库数据计算的
flex grow
值（而不是0/1），Flexbox机制将在父元素内部均匀分布它们。正是我们需要的

就这样，剩下的都是糖果

现在，您只需决定如何处理从数据库检索到的父宽度值：100%，x倍视口宽度，x倍智能手机显示宽度，等等

你将需要设置一个家长的宽度限制无论如何，用户讨厌滚动或左/右滑动多次（我知道我这样做！）

Th