用线连接 div 以表示层次结构的最佳方式是什么？答案

【问题标题】：What's the most optimal way of connecting divs with a line to represent a hierarchy?用线连接 div 以表示层次结构的最佳方式是什么？
【发布时间】：2019-12-15 16:47:07
【问题描述】：

我试图找出问题的解决方案，我想到的一些解决方案是在每个子任务的伪元素之后使用只有左边框和下边框可见并相对定位它，但这不会工作，如果我有深入多层的任务。我不能真正将每个任务放在带边框的 div 中，因为它们会在尴尬的地方结束并且不是有效的 html。

我能想到的最好的解决方案是，使用一个 div 来包含所有子任务并画一条垂直线。为了制作水平线，我会在每个子任务中使用 before 伪元素。应该没问题吧？

我在这个项目中使用 react，每个任务都是一个 react 组件。

有问题的设计：

【问题讨论】：

首先，层次结构必须在 HTML 中清晰可见：div 包含子 div。然后使用 SVG 绘制图形。
@ThanhTrung 应该也可以使用可能更容易的伪元素。

标签： html css line hierarchy

【解决方案1】：

这是一个幼稚的解决方案：

      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
      .cards {
        width: 800px;
        margin: 0 auto;
      }
      .card {
        width: 100%;
        background: #fff;
        background-color: #fff;
        margin: 0 0 10px 0;
        box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
        border-radius: 8px;
        padding: 20px;
        position: relative;
        clear: both;
      }
      .parent {
        height: auto;
      }
      .child {
        float: right;

        width: 100%;
        border-left: 1px dotted #ccc;
        padding-left: 20%;
      }
      .child .card:after {
        content: '';
        width: 25%;
        border: 1px dotted #ccc;
        position: absolute;
        left: -25%;
        top: 50%;
      }

    <div class="cards">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="parent">
        <div class="card">Card 3</div>
        <div class="child">
          <div class="card">Child card 1 of Card 3</div>
          <div class="parent">
            <div class="card">Child card 2 of Card 3</div>
            <div class="child">
              <div class="parent">
                <div class="card">Child card 1 of Child Card 2</div>
                <div class="child">
                  <div class="card">Child card 1 of Child Card 1</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">Child card 3 of Card 3</div>
          <div class="card">Child card 4 of Card 3</div>
          <div class="card">Child card 5 of Card 3</div>
          <div class="card">Child card 6 of Card 3</div>
          <div class="card">Child card 7 of Card 3</div>
        </div>
      </div>
      <div class="card">Card 4</div>
    </div>

这里是codepen。

【讨论】：