Skip to main content
adicionou 8 caracteres ao conteúdo; título editado
Fonte Link
Joao Paulo
  • 12mil
  • 26
  • 89
  • 153

Como centralizar umuma árvore binária?

JQueryjQuery ou JavascriptJavaScript podem ser usados.

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

Como centralizar um á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.

Como centralizar uma á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.

Tweeted twitter.com/#!/StackOverflowPT/status/553413995324252160
Tirar o código do JSFiddle para evitar problemas futuros caso o serviço fique off + edição do título
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

Centralizar Como centralizar um árvore binária com css ou js?

Olá, euEu preciso centralizar corretamente este modelo de árvore binária.

jQueryJQuery ou javascriptJavascript podem ser usados.

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

Obrigado desde já.

Html:

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

jQuery:

$('.node').each(function(){
var vm = $(this);
lftwid = vm.children(".lft").width();
console.log(lftwid);
rgtwid = vm.children(".rgt").width();
if (lftwid > rgtwid) {
    vm.children(".rgt").width(lftwid);
} else if (lftwid < rgtwid) {
    vm.children(".lft").width(rgtwid);
}

});

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

.root {
position: absolute !important;
margin:0;
padding:0;
overflow-x: auto;
display:block;
text-align:center;
background-color: #ddd;
}
.node {
width: auto;
height:auto;
}
.lft, .rgt {
margin:5px;
margin-top: 20px;
min-width:60px;
min-height:60px;
position:relative;
}
.rgt {
border:1px solid #000;
float:right;
background-color: #ccc;
}
.lft {
border:1px solid #fff;
float:left;
background-color: #eee;
}

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>

Centralizar árvore binária com css ou js

Olá, eu preciso centralizar corretamente este modelo de árvore binária.

jQuery ou javascript podem ser usados.

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

Obrigado desde já.

Html:

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

jQuery:

$('.node').each(function(){
var vm = $(this);
lftwid = vm.children(".lft").width();
console.log(lftwid);
rgtwid = vm.children(".rgt").width();
if (lftwid > rgtwid) {
    vm.children(".rgt").width(lftwid);
} else if (lftwid < rgtwid) {
    vm.children(".lft").width(rgtwid);
}

});

Css:

.root {
position: absolute !important;
margin:0;
padding:0;
overflow-x: auto;
display:block;
text-align:center;
background-color: #ddd;
}
.node {
width: auto;
height:auto;
}
.lft, .rgt {
margin:5px;
margin-top: 20px;
min-width:60px;
min-height:60px;
position:relative;
}
.rgt {
border:1px solid #000;
float:right;
background-color: #ccc;
}
.lft {
border:1px solid #fff;
float:left;
background-color: #eee;
}

Como centralizar um árvore binária?

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

JQuery ou Javascript podem ser usados.

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>

adicionou 50 caracteres ao conteúdo
Fonte Link
Marcelo Aymone
  • 3,4mil
  • 17
  • 40

Outro detalhe legal, é que conseguisse criarprecisa ter um overflow-X automáticamenteautomático, permitindo que a janela se adaptasse(crescer)adapte conforme aumenta a árvore.

Estou tentando tornar mais compacto possível para exibir muitos resultados.

Outro detalhe legal, é que conseguisse criar um overflow-X automáticamente, permitindo que a janela se adaptasse(crescer) conforme aumenta a árvore.

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.

Fonte Link
Marcelo Aymone
  • 3,4mil
  • 17
  • 40
Carregando