水平 div 树

Question

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

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

是否可以将子元素相对于父元素的左侧定位，而不是相对于父元素中的文本元素？还是调整文本的高度到父级，让后面的子元素调整到文本元素的末尾？或者是否有任何其他优雅的解决方案来构建具有可变数量的子元素和兄弟姐妹的水平树，仅使用 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 要真正支持水平树要复杂得多

Answer 2

在你的 HTML 中：我用一个额外的 div 标签包裹了你的 'content'。

在你的 css 中：我将左边改为左边距。

这是你想要的结果吗？

HTML:

<div>
 <div>content</div>
<div class="layout">
    <div>content</div>
    <div class="layout">
        content
    </div>
    <div class="clear"></div>
    <div class="layout">
        <div>content</div>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div class="layout">
    <div>content</div>
    <div class="layout">
        <div>content</div>
        <div class="layout">
            <div>content</div>
                <div class="layout">
                    <div>content</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>

CSS:

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

div.clear {
clear: both;
}

水平 div 树

Horizontal div tree

html

css

tree