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
Post a Comment