Recently, I've been working on a website dedicated to the League of Legends game. The main feature of this site is that it utilizes the Riot API to fetch data about the mastery tree and then showcases the images related to it. Everything was going smoothly until I encountered an alignment issue with the last two rows in each div section. Despite my efforts, I haven't been able to pinpoint the cause of this misalignment. It seems like the problem might be connected to how I'm handling rows with null values. Additionally, I observed that the rows tend to auto-align themselves, which led me to suspect that it could be an inherent trait of divs. Unfortunately, I can't share the link to the live site as I haven't secured my API key yet. However, you can take a look at a screenshot here: https://i.sstatic.net/as5Bi.png
Below is an excerpt from the HTML code:
<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's a snippet from the JavaScript code:
$.ajax({
url: url_tree,
type: 'GET',
dataType: 'json',
data: {
},
success: function (json) {
// Javascript code goes here
}
});
If you would like to explore the JSON data fetching process, you can visit this link: http://pastebin.com/DAAtukg4