I am having trouble with the layout of my tiles. Every time I add a new tile, it appears beneath the existing ones instead of beside them. Here is the code I am using:
<div class="tiles">
<div id="metro-array">
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin:10px; display: block; background-color: deepSkyBlue; color: #fff;">
Name
Age
</a>
<a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin:10px; display: block; background-color: deepSkyBlue; color: #fff;">
name2
Age 2
</a>
</div>
<script src="js/tileJs.js" type="text/javascript"></script>
</div>
Here is my CSS for the tiles:
.tiles {
margin: 0px;
font-family:'Lato', Helvetica, sans-serif;
line-height: 28px;
font-size: 16px;
color: #333;
font-weight: lighter;
}
#metro-array a, #downloads a {
text-indent: 5px;
font-weight: normal;
text-transform: uppercase;
}
I attempted to manually add left margins to fix the issue, but since I will be adding tiles dynamically, this method is not feasible. Can you please advise on what changes I should make to my CSS?
Expected Result:
Current Output: