javascript - CSS 简单甘特图(紧凑)

Question

我正在尝试使用 html 和 css 生成一个简单的甘特图，我需要弄清楚如何使它紧凑，这意味着如果有可用的空白，该条应尝试适合前一行，同时保持相同的 x 距离。

上下文:

• X 轴是以月为单位的时间轴
• 每个元素在给定月份开始和结束
• 正在通过 JS 为每个元素生成宽度和边距

当前输出:

期望的输出:

约束

• JS 解决方案是可以的，但理想情况下，该解决方案不需要使用过度杀伤现有的 js 库，因为代码将在浏览器扩展上运行，这会暴露很多兼容性问题。
• 这些元素不需要动态移动，因为在大多数情况下这将类似于渲染图像。
• 将呈现不超过 30 个元素。

当前实现片段:[编辑] 我稍微更改了代码片段以证明需要与 x 保持固定距离。

.timeline div {
    height: 10px;
    background: black;
    margin: 2px;
}

<div class="timeline">
  <div style="width: 80px; margin-left: 0px;"></div>
  <div style="width: 40px; margin-left: 35px;"></div>
  <div style="width: 45px; margin-left: 40px;"></div>
  <div style="width: 100px; margin-left: 135px;"></div>
  <div style="width: 160px; margin-left: 270px;"></div>
  <div style="width: 185px; margin-left: 385px;"></div>
</div>

我尝试过的其他解决方案:

最初我开始在 JS 中渲染每月的正方形矩阵并为每个匹配的月份附加一个元素然后使用一些复杂的逻辑来帮助渲染但我意识到它变得越来越复杂所以我回溯检查我是否绝对确定没有更简单的解决方案。

Answer 1

步骤

• 将时间线设置为inline-flex

• 使用双倍高度可以让子元素上下排列

  • 高度:20px；

• 即使是子元素也底部对齐

  • align-self: flex-end;
• 使用absolute定位，以ma​​rgin-left实现动态起始位置

.timeline {
  display: inline-flex;
  height: 20px;
  position : relative;
}

.timeline div {
  height: 10px;
  background-color: black;
  position : absolute;
}

.timeline div:nth-child(even) {
  align-self: flex-end;
}

<div class="timeline">
 <div style="width: 80px; margin-left: 0px;"></div>
  <div style="width: 20px; margin-left: 75px;"></div>
  <div style="width: 45px; margin-left: 90px;"></div>
  <div style="width: 100px; margin-left: 135px;"></div>
  <div style="width: 160px; margin-left: 270px;"></div>
  <div style="width: 185px; margin-left: 385px;"></div>
</div>

---

三个元素重叠平行

您可以将 align-items 设置为 flex-start 并将 margin-top 更改为从上方偏移的位置

步骤

• 一个元素高度 * 元素个数
  • 高度:30px ( 10 * 3)
• 使用默认对齐项:flex-start 重置偏移位置
• 将 margin-top 更改为从上方偏移的位置
  • 一个元素高*级
  • 第二个:10 * 2
  • 第三个:10 * 3

.timeline {
  display: inline-flex;
  height: 30px;
  position : relative;
}

.timeline div {
  height: 10px;
  background-color: black;
  position : absolute;
}

.second{
  margin-top : 10px;
}

.third {
  margin-top : 20px;
}

<div class="timeline">
 <div style="width: 80px; margin-left: 0px;"></div>
  <div style="width: 20px; margin-left: 75px;" class="second"></div>
  <div style="width: 45px; margin-left: 90px;" class="third" ></div>
  <div style="width: 100px; margin-left: 135px;"></div>
  <div style="width: 160px; margin-left: 270px;"></div>
  <div style="width: 185px; margin-left: 385px;"></div>
</div>