水平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，但是对于trully支持水平树来说CSS更加复杂

Answer 2

在您的HTML中：我用额外的div标签包装了您的“内容”。

在你的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;
}