html - 水平 div 树

Question

我想在不使用 javascript 的情况下使用 css 从嵌套的 div 生成水平树。子元素应该处于相同的深度。因此，我创建了一个带有 float left 和 clear 元素的嵌套 div 结构。但是子元素的深度不同:

请看我的 JSFiddle: https://jsfiddle.net/bpb680L9/

是否可以将子元素相对于父元素的左侧定位，而不是相对于父元素中的文本元素？还是调整文本的高度到父级，让后面的子元素调整到文本元素的末尾？或者是否有任何其他优雅的解决方案来构建具有可变数量的子元素和 sibling 的水平树，仅使用 css 和 html？

CSS

div.layout {
    border: 1px solid black;
    display: inline-block;
    position: relative;
    left: 50px;
}
div.clear {
    clear: both;
}

HTML

<div>
    content
    <div class="layout">
        content
        <div class="layout">
            content
        </div>
        <div class="clear"></div>
        <div class="layout">
            content
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="layout">
        content
        <div class="layout">
            content
            <div class="layout">
                content
                    <div class="layout">
                        content
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>

如有任何帮助，我们将不胜感激!

Answer 1

查看这个 JSFiddle: https://jsfiddle.net/bpb680L9/2/

<div id="wrapper"><span class="label">Root</span>
  <div class="branch lv1">
<div class="entry"><span class="label">Entry-1</span>
  <div class="branch lv2">
    <div class="entry"><span class="label">Entry-1-1</span>
      <div class="branch lv3">
        <div class="entry sole"><span class="label">Entry-1-1-1</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-1-2</span>
      <div class="branch lv3">
        <div class="entry sole"><span class="label">Entry-1-2-1</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-1-3</span>
      <div class="branch lv3">
        <div class="entry sole"><span class="label">Entry-1-3-1</span></div>
      </div>
    </div>
  </div>
</div>
<div class="entry"><span class="label">Entry-2</span></div>
<div class="entry"><span class="label">Entry-3</span>
  <div class="branch lv2">
    <div class="entry"><span class="label">Entry-3-1</span></div>
    <div class="entry"><span class="label">Entry-3-2</span></div>
    <div class="entry"><span class="label">Entry-3-3</span>
      <div class="branch lv3">
        <div class="entry"><span class="label">Entry-3-3-1</span></div>
        <div class="entry"><span class="label">Entry-3-3-2</span>
          <div class="branch lv4">
            <div class="entry"><span class="label">Entry-3-3-2-1</span></div>
            <div class="entry"><span class="label">Entry-3-3-2-2</span></div>
          </div>
        </div>
        <div class="entry"><span class="label">Entry-3-3-3</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-3-4</span></div>
  </div>
</div>
<div class="entry"><span class="label">Entry-4</span></div>
<div class="entry"><span class="label">Entry-5</span></div>

我使用过 div，但 CSS 复杂得多，无法真正支持水平树