Question

我试图弄清楚如何根据自下而上的方式定位使用ul list生成的流程图。

它是家谱家谱。我已经使用这个优秀的代码generator delegation自上而下制作了它但是我想要底部的第一个元素，父母之上，祖父母之上等等......

以下是代码：

HTML

.tree ul {
    padding-top: 20px;
    position: relative;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 39px 5px 0 5px;
}

.dados_membro {
    border: 1px solid;
    border-radius: 20px;
    width: 300px;
    margin: auto;
    text-align:left;
    padding:10px
}

CSS

.tree ul {
    position: absolute;
    bottom:0;
}

.tree ul li ul{
    position:relative;
}

.tree li {
    float: right;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    margin-top:-120px
}
.dados_membro {
    border: 1px solid;
    border-radius: 5px;
    width: 100px;
    margin: auto;
    text-align:left;
    padding:10px
}

我正在测试此here中的一些规则，并且可以定位第一个节点＆＃34; Me＆＃34;在底部，其他的与CSS相似，但同一级别的所有节点（父母，祖父母等等）都会被填满。

{{1}}

我不知道树长大了多少，也不知道所有节点都有元素。无法使用javascript。有什么想法吗？

Answer 1

您可以使用flexbox属性flex-direction: column-reverse更改元素的顺序，如果这是项目的选项（请参阅compatibility table）。

Answer 2

要恢复列表的顺序，我为主容器position: absolute添加了bottom:0，<ul> s a position:relative和所有<li> s {{1与position:absolute一起使用，除了我希望位于容器底部的第一个级别。

这样，每个bottom:50px的位置都比其父<li>的相对位置高50px。

实现树样式的最后一个调整是为女性和男性父母添加一个类，以便将每个类放在其子节点上方的左侧和右侧。由于我在动态生成这棵树，我可以计算树有多少级别并计算父/母节点之间的距离。如果我无法控制html dinamically，我需要使用javascript来计算节点并动态应用css规则（也许我将来会做ti，只是为了生成树的动画）。

新代码为here

HTML

<ul>

CSS

<div class="tree">
    <ul>
        <li>
            <div class="dados_membro">Me</div>
            <ul>
                <li class="f1">
                    <div class="dados_membro">Father</div>
                    <ul>
                        <li class="f2">
                            <div class="dados_membro">Grandfather f</div>
                        </li>
                        <li class="m2">
                            <div class="dados_membro">Grandmotherf </div>
                        </li>
                    </ul>
                </li>
                <li class="m1">
                    <div class="dados_membro">Mother</div>
                    <ul>
                        <li class="f2">
                            <div class="dados_membro">Grandfather m</div>
                        </li>
                        <li  class="m2">
                            <div class="dados_membro">Grandmother m</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS从下到上嵌套了ul流程图

2 个答案: