Html 我有哪些显示分层数据的选项？

我试图用HTML、JS和JQuery来表示一组分层数据。我决定使用左浮动的div容器系统而不是网格系统，以使代码更易于递归生成。问题是我有一些限制；例如，我希望树的宽度正好适合客户端窗口。我可以通过在JS中创建每个div时动态设置其宽度来实现这一点。宽度是通过计算元素具有的同级数和该同级数除以100的百分比计算的

这种方法的问题在于它浪费了大量宝贵的空间。即使一个元素没有子元素，它也会得到与其所有同级元素相同的空间量。一旦你降到4级或5级，空间就开始成为一种重要的商品

我尝试过的另一种方法是让浏览器自动调整所有内容的大小。这真的很好，因为没有什么比它需要的更多的空间了。这里的问题是，我失去了对动态大小的很多控制；我需要能够放大和缩小，以及准确地从100%宽度开始，正如我前面提到的。此外，当树超过页面宽度时，溢出的div会向下移动。我需要他们水平滚动页面

所以我的问题是。。。我有哪些选项可以确保我的树结构节省空间，完全适合客户端宽度，并允许通过动态调整大小进行缩放

以下是分层数据的屏幕截图：

下面是我正在生成的代码类型的简化示例：

<div id="map" class="tag-container">
    <div class="tag">Level 0 data</div>
    <div class="tag-container">
        <div class="tag">Level 1 data</div>
        <div class="tag-container">
            <div class="tag">Level 2 data</div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
            </div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
                <div class="tag-container">
                    <div class="tag">Level 4 data</div>
                </div>
            </div>
        </div>
        <div class="tag-container">
            <div class="tag">Level 2 data</div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
            </div>
            <div class="tag-container">
                <div class="tag">Level 3 data</div>
                <div class="tag-container">
                    <div class="tag">Level 4 data</div>
                </div>
            </div>
        </div>
    </div>
</div>

---

如果您不怕使用css3，我的建议是：

添加处于同一级别的div分组标记容器。上述标记将如下所示：

<div id="map" class="tag-container">
        <div class="tag">Level 0 data</div>
        <div class="tag-container">
            <div class="tag">Level 1 data</div>
            <div class="tag-container-group">
                <div class="tag-container">
                    <div class="tag">Level 2 data</div>
                    <div class="tag-container-group">
                        <div class="tag-container">
                            <div class="tag">Level 3 data</div>
                        </div>
                        <div class="tag-container">
                            <div class="tag">Level 3 data</div>
                            <div class="tag-container-group">
                                <div class="tag-container">
                                    <div class="tag">Level 4 data</div>
                                </div>
                            </div>
                    </div>
                </div>
                </div>
            <div class="tag-container">
                <div class="tag">Level 2 data</div>
                <div class="tag-container-group">
                    <div class="tag-container">
                        <div class="tag">Level 3 data</div>
                    </div>
                    <div class="tag-container">
                        <div class="tag">Level 3 data</div>
                        <div class="tag-container-group">
                            <div class="tag-container">
                                <div class="tag">Level 4 data</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

我还没有跨浏览器测试过这个。只有镀铬的。当然，在旧的IE版本中，它会被削弱，但也许这是一个你愿意做的交易？或者可以考虑使用“代码>显示：内联表< /代码>的替代样式表。

---

如果希望节点的大小与其内容相关，则应删除

.tag container group>中的
宽度：1px
。tag container

是否可以

显示：内联表

解决问题？我不确定我是否完全理解您想要如何布局树。这似乎过时了。。。总之，我添加了一个树的截图。每个容器都有一个紫色的“标签”，其所有子容器都有自己的标签。所有标签都向左浮动。效果很好。谢谢

<div id="map" class="tag-container">
        <div class="tag">Level 0 data</div>
        <div class="tag-container">
            <div class="tag">Level 1 data</div>
            <div class="tag-container-group">
                <div class="tag-container">
                    <div class="tag">Level 2 data</div>
                    <div class="tag-container-group">
                        <div class="tag-container">
                            <div class="tag">Level 3 data</div>
                        </div>
                        <div class="tag-container">
                            <div class="tag">Level 3 data</div>
                            <div class="tag-container-group">
                                <div class="tag-container">
                                    <div class="tag">Level 4 data</div>
                                </div>
                            </div>
                    </div>
                </div>
                </div>
            <div class="tag-container">
                <div class="tag">Level 2 data</div>
                <div class="tag-container-group">
                    <div class="tag-container">
                        <div class="tag">Level 3 data</div>
                    </div>
                    <div class="tag-container">
                        <div class="tag">Level 3 data</div>
                        <div class="tag-container-group">
                            <div class="tag-container">
                                <div class="tag">Level 4 data</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

.tag {
    text-align: center;
    border: 1px solid #aaa;
}
.tag-container-group {
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;

    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;

    /* W3C */
    display:box;
    box-orient:horizontal;
}
.tag-container-group > .tag-container {
    width: 1px;
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
}