html - 如何在 CSS 中并排/在网格中放置图像及其标题？

Question

这正是我想要实现的目标。

我在尝试并排放置 5 张图片时遇到了困难，目前我的代码已发布在 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

以这种方式改变你的CSS

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

.productlist {
  display: block;


}

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