My goal is to display images randomly from my image file using PHP, which is working fine. However, I am facing an issue with spacing the images evenly to fill the width of my site.
This is how it currently appears:
https://i.stack.imgur.com/AzKTK.png
I have marked a red line on the right side where I want the div to extend to.
I attempted to use flex method for spacing but found that it compresses all divs when the page is resized, which is not ideal for a responsive design.
I also tried the span stretch method but it did not work as expected.
HTML:
<div id="tile_wrapper">
<?php
$res = $conn->query("SELECT * FROM randomimg ORDER BY RAND() LIMIT 16");
while($row=$res->fetch_array())
{
include 'includes/tile.php';
}
?>
<span class="stretch"></span>
</div>
PHP:
<div id="tile_image_wrapper">
<a href="storepage.php?name=<?php echo $row['storename']; ?>" />
<?php
echo
'<div id="tile_inner_wrapper">' .
'<img src="images/stores/' . $row['storename'] . '.png">' .
'</div>';
?>
</a>
</div>
CSS:
#tile_wrapper {
width:100%;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#tile_image_wrapper {
display: inline-block;
width:130px;
border:1px solid #ccc;
height:50px;
border-radius: 3px;
background-color:#fff;
margin:3px;
}
#tile_inner_wrapper {
height:50px;
width:130px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
#tile_wrapper img {
max-width:100px;
max-height:40px;
top: 50%;
transform: translateY(-50%);
display: block;
position: relative;
margin: 0 auto;
}
#tile_image_wrapper:hover {
border:1px solid #aaa;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
Any assistance would be greatly appreciated!