如何将带有标题的图像并排/并排放置在网格中？

Question

This is exactly what I'm trying to achieve.

I'm having difficulties in trying to place the 5 images side by side, and the code I have so far is posted below, HTML:

    <ul>
      <li class="container">
        <img class="productlist" src="img/shop-1.jpg" alt="shop1" />
        <span class="caption">Quisque congue ipsum</span>
        <span class="caption">lorem</span>
      </li>

      <li class="container">
        <img class="productlist" src="img/shop-2.jpg" alt="shop2" />
        <span class="caption">Curabitur pharetra</span>
        <span class="caption">lorem</span>
      </li>
    </ul>

CSS:

.container {
  float: left;
  list-style-type: none;
}

.productlist {
  display: block;
  width: 45%;

}

.caption {
  display: block;
  width: 100%;
  text-align: left;
}

Answer 1

change your css this way

.container {
  float: left;
  list-style-type: none;
   width: 45%;
}

.productlist {
  display: block;


}

.caption {
  display: block;
  width: 100%;
  text-align: left;
}

Answer 2

Add width in .container div

 .container { float: left; list-style-type: none; width: 45%; } .productlist { display: block; } .caption { display: block; width: 100%; text-align: left; } 

 <ul> <li class="container"> <img class="productlist" src="img/shop-1.jpg" alt="shop1" /> <span class="caption">Quisque congue ipsum</span> <span class="caption">lorem</span> </li> <li class="container"> <img class="productlist" src="img/shop-2.jpg" alt="shop2" /> <span class="caption">Curabitur pharetra</span> <span class="caption">lorem</span> </li> </ul>