I need to arrange a set of divs equidistant from each other. My goal is to have the maximum number of divs fit side by side with equal spacing between them and the container edge.
While I almost achieved this with the code below (credit to another post), there is an issue when resizing the page as shown on where the items on the edges do not adjust their distance from the sides.
<body>
<div id="container">
<div class='item'><a href='#'><img src='test.png' alt='1' height='150' width='150' /></a><br />test</div>
<div class='item'><a href='#'><img src='test.png' alt='2' height='150' width='150' /></a><br />test</div>
<div class='item'><a href='#'><img src='test.png' alt='3' height='150' width='150' /></a><br />test</div>
...
<div class='item'><a href='#'><img src='test.png' alt='10' height='150' width='150' /></a><br />test</div>
</div>
</body>
The CSS used for this layout:
#container {
text-align: justify;
}
#container:after{
content: '';
width: 100%;
display: inline-block;
}
.item {
text-align: center;
width: 200px;
display: inline-block;
box-sizing: border-box;
padding:25px;
}
.item img {
border-radius: 25px;
}
If anyone has suggestions on achieving what I need, please share. Keep in mind that the number of items is variable, so manual specification of distances is not viable.
Your help would be greatly appreciated.