I need to properly center this binary tree template.
jQuery or JavaScript can be used.
I'm going to need to generate the code with PHP , so you need to have some logic in html .
Another detail is that you need to have% automatic%, allowing the window to adapt as the tree increases.
I'm trying to make it as compact as possible to display many results. I created this code:
$(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><linkrel='stylesheet'href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/><linkrel='stylesheet'href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/><divclass='container'><divclass='row'><divclass='rootnode'><p><iclass="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>