响应式 HTML/CSS 树视图

Question

我想构建响应式树形图 - 基本示例： https://jsfiddle.net/ppnfpggx/2/

但是对于响应式布局，我遇到了一些问题。例如，在小型设备上应该是这样的：

每一项的上一行：

.tree-item::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -20px;
  height: 4px;
  background-color: #000;
  width: 88px; // (48 + 20 + 20 -> half-margin on both sides)
}

项目计数可能是动态的，所以我尝试使用:last-child 来删除::before，但在最后之前遇到了项目问题。当项目数超过三个时我真正需要的，第三个项目应该关闭树，从剩余项目中删除 pseudo-elements 并以某种方式将最后两个项目居中而不使用 margin-left。

能否通过 CSS/JS 实现这种响应式视图，如果可以，请提供任何想法或基本示例。

Answer 1

我不知道这是否是您想要的，但弯曲通常是仅使用 css 进行响应式设计的好方法。

#tree{
    display: flex;
    justify-content: space-around;
}

//编辑 尝试将此代码块放入您的 css 中。工作不完美，但解决了最初的问题。

@media (max-width: 340px) {
    .tree-item:nth-child(n+4)::before {
        display: none;
        }
    .tree-item:nth-child(n+4)::after {
    display: none;
    }
    .tree-item:nth-child(3)::after {
      left: auto;
      right: 50%;
    }
}