javascript - 在甘特图中将可拖动div内的div对齐

我正在尝试开发一个甘特图来显示某些分组活动列表。在下图中，我附上了用于生成甘特图的数据样本集。 enter image description here

我使用了此链接（http://yukon-admin.tzdthemes.com/html/plugins-gantt_chart.html）中提供的甘特图并对其进行了修改，以便我可以在每个组中显示多个活动。 [在这里，他们只允许你为每个组添加一个活动]。

这是模板中的甘特图， enter image description here

根据我的要求修改甘特图， enter image description here

现在我想一个接一个地显示我的活动，类似于应用float时会发生的事情：left，（float：left在这种情况下不起作用）。

这就是我想要显示我的活动的方法，我可以通过将CSS属性设置为绝对来实现这一点，但是线条保持静态，我无法滚动我的甘特图以查看其他活动。 enter image description here

我看到即使宽度被定义为特定的div，它也会占据其容器div的整个宽度。这就是为什么div一个堆叠在另一个之下的原因。 enter image description here

如何让线条显示在另一条线旁边而不是一条线在另一条线下？任何帮助，将不胜感激。

提前致谢。：）