8

Eu preciso centralizar corretamente este modelo de árvore binária.

jQuery ou JavaScript podem ser usados.

Eu vou precisar gerar o código com PHP, então precisa ter certa lógica no html.

Outro detalhe, é que precisa ter um overflow-x automático, permitindo que a janela se adapte conforme aumenta a árvore.

Estou tentando tornar mais compacto possível para exibir muitos resultados. Criei este código:

$(function () {
    $('.node').each(function () {
        var vm = $(this);
        lftwid = vm.children(".lft").width();
        rgtwid = vm.children(".rgt").width();
        if (lftwid != rgtwid) {
            if (lftwid > rgtwid) {
                vm.children(".rgt").width(lftwid);
            } else {
                vm.children(".lft").width(rgtwid);
            }
        }
    });
});
.container {
    overflow-x: auto;
}
.root {
    position: absolute !important;
    margin:0;
    padding:0;
    display:block;
    text-align:center;
    font-size: 10px;
    background-color: #ddd;
}
.node {
    width: auto;
    height:auto;
}
.lft, .rgt {
    margin:5px;
    margin-top: 10px;
    min-width:40px;
    min-height:40px;
}
.rgt {
    border:1px solid #000;
    float:right;
    background-color: #ccc;
}
.lft {
    border:1px solid #fff;
    float:left;
    background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<div class='container'>
    <div class='row'>
        <div class='root node'>
            <p><i class="fa fa-user"></i>
            </p>
            <p>root name</p>
            <p>150</p>
            <div class='lft'>
                <p><i class="fa fa-user"></i>
                </p>
                <p>lft name</p>
                <p>200</p>
                <div class='node'>
                    <div class='lft'>
                        <p><i class="fa fa-user"></i>
                        </p>
                        <p>lft name</p>
                        <p>100</p>
                        <div class='lft'>
                            <p><i class="fa fa-user"></i>
                            </p>
                            <p>lft name</p>
                            <p>200</p>
                            <div class='node'>
                                <div class='lft'>
                                    <p><i class="fa fa-user"></i>
                                    </p>
                                    <p>lft name</p>
                                    <p>50</p>
                                    <div class='lft'>
                                        <p><i class="fa fa-user"></i>
                                        </p>
                                        <p>lft name</p>
                                        <p>50</p>
                                    </div>
                                    <div class='rgt'>
                                        <p><i class="fa fa-user"></i>
                                        </p>
                                        <p>rgt name</p>
                                        <p>100</p>
                                    </div>
                                </div>
                                <div class='rgt'>
                                    <p><i class="fa fa-user"></i>
                                    </p>
                                    <p>rgt name</p>
                                    <p>150</p>
                                </div>
                            </div>
                        </div>
                        <div class='rgt'>
                            <p><i class="fa fa-user"></i>
                            </p>
                            <p>rgt name</p>
                            <p>50</p>
                        </div>
                    </div>
                    <div class='rgt'>
                        <p><i class="fa fa-user"></i>
                        </p>
                        <p>rgt name</p>
                        <p>0</p>
                    </div>
                </div>
            </div>
            <div class='rgt'>
                <p><i class="fa fa-user"></i>
                </p>
                <p>rgt name</p>
                <p>100</p>
                <div class='node'>
                    <div class='lft'>
                        <p><i class="fa fa-user"></i>
                        </p>
                        <p>lft name</p>
                        <p>50</p>
                    </div>
                    <div class='rgt'>
                        <p><i class="fa fa-user"></i>
                        </p>
                        <p>rgt name</p>
                        <p>100</p>
                        <div class='node'>
                            <div class='lft'>
                                <p><i class="fa fa-user"></i>
                                </p>
                                <p>lft name</p>
                                <p>50</p>
                                <div class='lft'>
                                    <p><i class="fa fa-user"></i>
                                    </p>
                                    <p>lft name</p>
                                    <p>150</p>
                                </div>
                                <div class='rgt'>
                                    <p><i class="fa fa-user"></i>
                                    </p>
                                    <p>rgt name</p>
                                    <p>200</p>
                                </div>
                            </div>
                            <div class='rgt'>
                                <p><i class="fa fa-user"></i>
                                </p>
                                <p>rgt name</p>
                                <p>50</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

5
  • 2
    Marcelo, editei a pergunta e trouxe o código do JSFiddle para o SOpt para evitar comprometer sua pergunta caso o serviço fique offline. (você pode reverter quando quiser). Commented 9/01/2015 às 4:22
  • 4
    Eu não percebo o qual é a pergunta.. tou aqui à um bom bocado a tentar.
    – MoshMage
    Commented 20/04/2015 às 21:45
  • Marcelo, sua pergunta age mais como um modelo para cópia de código do que pergunta em si. O que exatamente pretende perguntar quando diz 'centralizar'? Questiono pois parece-me que já está completamente centralizado (visualmente).
    – José
    Commented 24/05/2015 às 7:21
  • Não fica centralizado com relação a todas linhas. A de cima fica bem a direita ou esquerda quando se tem muitos elementos de um lado da árvore. Commented 24/05/2015 às 14:00
  • 1
    @MarceloAymone acho que entendi. O quadro da direita não fica alinhado com o da esquerda se há muitos elementos, certo? Mas isso é consequência do fato de haver um tamanho mínimo para cada quadro devido ao texto e borda (ou seja, conteúdo), e também um tamanho máximo para o container (no código do bootstrap há limite) e a tela do computador. Você deve fazer surgir scroll horizontal e/ou não limitar o container (tamanho). Senão, o quadro da direita vai descer no eixo y em algum momento. Se for isso mesmo, posso editar sua pergunta para tentar melhor explicar ao povo - ou você mesmo pode editar.
    – José
    Commented 25/05/2015 às 8:58

1 Resposta 1

2

Se entendi bem você quer centralizar o elemento .root dentro de .container, no caso acredito que você possa usar margin: 0 auto e ao invés de position: absolute;, usar relative como no exemplo em Previnir que os elementos quebrem dentro de um overflow:

.root {
    position: relative !important;
    overflow-x: auto;
    margin:0 auto;
    padding:0;
    display:block;
    text-align:center;
    background-color: #ddd;
}
.node {
    width: auto;
    height:auto;
    white-space: nowrap;
}
.lft, .rgt {
    margin:5px;
    margin-top: 20px;
    min-width:60px;
    min-height:60px;
    display: inline-block;
    vertical-align: top;
}
.rgt {
    border:1px solid #000;
    background-color: #ccc;
}
.lft {
    border:1px solid #fff;
    background-color: #eee;
}
<div class="root node">
    <p><i class="fa fa-user"></i></p>
    <p>root name</p>
    <p>150</p>
    <div class="lft">
        <p><i class="fa fa-user"></i></p>
        <p>lft name</p>
        <p>200</p>
        <div class="node">
            <div class="lft">
                <p><i class="fa fa-user"></i></p>
                <p>lft name</p>
                <p>100</p>
                <div class="lft">
                    <p><i class="fa fa-user"></i></p>
                    <p>lft name</p>
                    <p>200</p>
                    <div class="node">
                        <div class="lft">
                            <p><i class="fa fa-user"></i></p>
                            <p>lft name</p>
                            <p>50</p>
                            <div class="lft">
                                <p><i class="fa fa-user"></i></p>
                                <p>lft name</p>
                                <p>50</p>
                            </div>
                            <div class="rgt">
                                <p><i class="fa fa-user"></i></p>
                                <p>rgt name</p>
                                <p>100</p>
                            </div>
                        </div>
                        <div class="rgt">
                            <p><i class="fa fa-user"></i></p>
                            <p>rgt name</p>
                            <p>150</p>
                        </div>
                    </div>
                </div>
                <div class="rgt">
                    <p><i class="fa fa-user"></i></p>
                    <p>rgt name</p>
                    <p>50</p>
                </div>
            </div>
            <div class="rgt">
                <p><i class="fa fa-user"></i></p>
                <p>rgt name</p>
                <p>0</p>
            </div>
        </div>
    </div>
    <div class="rgt">
        <p><i class="fa fa-user"></i></p>
        <p>rgt name</p>
        <p>100</p>
        <div class="node">
            <div class="lft">
                <p><i class="fa fa-user"></i></p>
                <p>lft name</p>
                <p>50</p>
            </div>
            <div class="rgt">
                <p><i class="fa fa-user"></i></p>
                <p>rgt name</p>
                <p>100</p>
                <div class="node">
                    <div class="lft">
                        <p><i class="fa fa-user"></i></p>
                        <p>lft name</p>
                        <p>50</p>
                        <div class="lft">
                            <p><i class="fa fa-user"></i></p>
                            <p>lft name</p>
                            <p>150</p>
                        </div>
                        <div class="rgt">
                            <p><i class="fa fa-user"></i></p>
                            <p>rgt name</p>
                            <p>200</p>
                        </div>
                    </div>
                    <div class="rgt">
                        <p><i class="fa fa-user"></i></p>
                        <p>rgt name</p>
                        <p>50</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .