0

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

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

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

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

这是分层数据的屏幕截图：

https://www.dropbox.com/sh/xl239fthmxss2dw/yhH_TUYq93

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

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

这是相关的CSS：

.tag-container {
    padding: 0px;
    float: left;
    box-sizing: border-box;
    display: inline;
    width: 33.333%
}

.zoom {
    cursor: pointer
}

body {
    background-color: azure;
    overflow: scroll
}
4

1 回答 1

0

如果你不害怕使用 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>

然后使用下面的 CSS

.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;
}

我没有跨浏览器测试过这个。仅在镀铬中。当然它会在较旧的 IE 版本中被削弱，但也许这是你愿意做的权衡？或者您可以考虑使用display: inline-table这些替代样式表。

如果您希望节点的大小相对于其内容，您应该width: 1px在.tag-container-group > .tag-container

于 2013-07-25T22:29:08.697 回答