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

Question

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

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

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

问题设计：

Answer 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.

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

What's the most optimal way of connecting divs with a line to represent a hierarchy?

html

css

line

hierarchy