Question

我一直在制作一个传奇网站联盟，它使用Riot API来检索精通树并显示图像。我有三个div包裹在另一个div中，除了每个div的最后两行之外，所有图像都正确对齐，我无法弄清楚原因。它必须与我如何处理其中包含null的行有关。我也注意到行似乎想要自我对齐（通过不处理空值来计算出来），所以也许这是div的固有内容。我无法链接该网站，因为我没有保护我的api密钥，所以这是一张图片：http://i.imgur.com/IcdxDfK.png

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

以下是javascript代码：

$.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];


                    for (i = 0; i < pages.length; i++) { //for each page
                        test_id = "";
                        space = false;
                        for (x = 0; x < lengths[i]; x++) {  //for the length of each page object
                            for (n = 0; n < json.tree.Offense[x].masteryTreeItems.length; n++) { // for the 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;

                    }
                }

            });

以下是我要提取的JSON数据：http://pastebin.com/DAAtukg4

Answer 1

您似乎已将text-align:center提供给某个父div。

从text-align:center更改为text-align:left。也许，这将解决问题。

从JSON检索数据时，HTML图像无法正确对齐

1 个答案: