javascript - HTML images not aligning properly when retrieving data from JSON -


i've been making little league of legends website uses riot api retrieve mastery tree , displays images. i've have 3 divs wrapped in div, , images align correctly except last 2 rows of each div, , can't figure out why. must how handling rows null in them. i've noticed rows seem want self-align (figured out not handling null values), maybe it's inherent divs. can't link site because haven't secured api key, here's picture: http://i.imgur.com/icdxdfk.png

here html:

<div>         <div id="offense_page" style="padding-left: 15px; padding-right: 15px; float: left; border: 5px solid white;">offense</div>         <div id="defense_page" style="padding-left: 15px; padding-right: 15px; float: left; border: 5px solid white;">defense</div>         <div id="utility_page" style="padding-left: 15px; padding-right: 15px; float: left; border: 5px solid white;">utility</div>     </div> 

here javascript code:

$.ajax({                 url: url_tree,                 type: 'get',                 datatype: 'json',                 data: {                  },                 success: function (json) {                     test_id = "";                     space = false;                     pages = ["offense", "defense", "utility"];                     lengths = [json.tree.offense.length, json.tree.defense.length, json.tree.utility.length];                       (i = 0; < pages.length; i++) { //for each page                         test_id = "";                         space = false;                         (x = 0; x < lengths[i]; x++) {  //for length of each page object                             (n = 0; n < json.tree.offense[x].masterytreeitems.length; n++) { // length of each items object                                 if (json.tree[pages[i]][x].masterytreeitems[n] != null && json.tree[pages[i]][x].masterytreeitems[n] != "") {                                     if (space) {                                         test_id += "<img style=\"opacity: 1.0; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-left: 74px;\" src=http://ddragon.leagueoflegends.com/cdn/4.20.1/img/mastery/" + json.tree[pages[i]][x].masterytreeitems[n].masteryid + ".png>";                                         space = false;                                     }                                     else {                                         test_id += "<img style=\"opacity: 1.0; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;\" src=http://ddragon.leagueoflegends.com/cdn/4.20.1/img/mastery/" + json.tree[pages[i]][x].masterytreeitems[n].masteryid + ".png>";                                     }                                 }                                 else {                                     space = true;                                 }                             }                             test_id += "<br />";                         }                         document.getelementbyid(pages[i] + "_page").innerhtml = test_id;                      }                 }              }); 

and here json data i'm pulling from: http://pastebin.com/daatukg4

it seems have given text-align:center parent div.

change text-align:center text-align:left. perhaps, resolve issue.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -