Question

我想创建某种树视图，虽然我不知道它是否是正确的单词。我画出它的图片让你明白我的意思。基本上它看起来像颠倒的花。

最好的办法是什么？对于在登录用户下注册的每个用户，应该有一个新的分支，其图片和名称以及分支数量不受限制。我想jQuery是方式，但我找不到任何可以帮助我的东西。所以我很高兴有关于jQuery插件的任何链接或提示或任何其他有用的提示。

Answer 1

我可能已经对这个答案有点过分了，但测试一些东西很有趣，所以我做了一个完整的解决方案。布局适应大多数元素的大小变化。我试图让CSS尽可能容易编辑。

您需要做的就是多次复制level_2_entry_container。这可以通过几行代码在客户端或服务器端轻松完成。左侧和右侧的内容结构相同（方向和定位通过CSS控制）。

在Chrome和Firefox的最新版本上进行了测试。

＆＃13;

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #444;
}
.main_container {
    min-width: 400px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.solution_container {
    position: relative;
}
.flex_container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
.flex_item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
.flex_item_static {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
}
.level_1_entry_image {
    width: 160px; /* change according to preference */
    height: 160px; /* change according to preference */
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 4px #eee;
    background-color: #eee;
}
.level_1_entry_content {
    padding-left: 20px; /* change according to preference - controls text distance from level_1_image */
}
.center_line {
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0px;
    left: 50%;
    margin-left: -2px;
    background-color: #eee;
    z-index: 1;
}
.center_footer {
    position: absolute;
    width: 20px;
    height: 4px;
    bottom: 0px;
    left: 50%;
    margin-left: -10px;
    background-color: #eee;
    z-index: 1;
}
.level_2_entry_container {
    width: 50%;
    box-sizing: border-box;
    margin-top: -50px;
}
.level_2_entry_container:first-child {
    margin-top: 0px;
}
.level_2_entry_container:nth-child(odd) {
    margin-right: auto;
}
.level_2_entry_container:nth-child(even) {
    margin-left: auto;
}
.level_2_entry_image,
.level_2_entry_content {
    margin: 20px; /* change according to preference - controls level_2_image distance from central_line */
}
.level_2_entry_image {
    width: 100px; /* change according to preference */
    height: 100px; /* change according to preference */
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 4px #eee;
    position: relative;
    z-index: 2;
    background-color: #eee;
}
.level_2_entry_container:nth-child(odd) .level_2_entry_image {
    margin-left: 0px !important;
    margin-bottom: 0px !important;
}
.level_2_entry_container:nth-child(even) .level_2_entry_image {
    margin-right: 0px !important;
    margin-bottom: 0px !important;
}
.level_2_entry_content {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    padding: 20px; /* change according to preference - controls text distance from level_2_image */
    padding-top: 0px;
    padding-bottom: 0px;
}
.level_2_entry_container:nth-child(odd) .level_2_entry_content {
    padding-left: 0px !important;
    text-align: right;
}
.level_2_entry_container:nth-child(even) .level_2_entry_content {
    padding-right: 0px !important;
    text-align: left;
}
.diagonal_line_1,
.diagonal_line_2 {
    position: absolute;
    width: 75%;
    height: 75%;
    z-index: 1;
    top: 0px;
}
.diagonal_line_1 {
    right: 0px;
}
.diagonal_line_2 {
    left: 0px;
}
.level_2_entry_container:nth-child(odd) .diagonal_line_2 {
    display: none;
}
.level_2_entry_container:nth-child(even) .diagonal_line_1 {
    display: none;
}
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(1) {
    order: 1;
}
.level_2_entry_container:nth-child(odd) > .flex_container > .flex_item:nth-child(2) {
    order: 2;
}
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(1) {
    order: 2;
}
.level_2_entry_container:nth-child(even) > .flex_container > .flex_item:nth-child(2) {
    order: 1;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
        <div class="main_container">
            <div class="solution_container">
                <div class="flex_container">
                    <div class="flex_item"></div>
                    <div class="flex_item flex_item_static">
                        <img class="level_1_entry_image" src="http://placehold.it/320x320"/>
                    </div>
                    <div class="flex_item">
                        <div class="level_1_entry_content">Lorem ipsum dolor sit amet</div>
                    </div>
                </div>
                <div class="center_line"></div>
                <div class="center_footer"></div>
                <div class="level_2_container">
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="level_2_entry_container">
                        <div class="flex_container">
                            <div class="flex_item">
                                <div class="level_2_entry_content">Lorem ipsum dolor sit amet</div>
                            </div>
                            <div class="flex_item flex_item_static">
                                <img class="level_2_entry_image" src="http://placehold.it/200x200"/>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_1">
                                    <line x1="10" y1="0" x2="0" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                                <svg viewbox="0 0 10 10" preserveAspectRatio="none" class="diagonal_line_2">
                                    <line x1="0" y1="0" x2="10" y2="10" stroke="#eee" stroke-width="0.4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

＆＃13;

如何制作具体的“树视图”

1 个答案: