如何将图像并排放置在带有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;
}

Answer 2

在.container div

中添加宽度

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;