html - 如何在CSS中使用标题将图像并排放置/放置在网格中？

这正是我要实现的目标。



我在尝试并排放置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;
}

最佳答案

这样改变你的CSS

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

.productlist {
  display: block;


}

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

关于html - 如何在CSS中使用标题将图像并排放置/放置在网格中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42992380/