html - 使用 HTML 和 CSS 创建 4x5 图像网格

Question

我正在尝试创建一个 4x5 图像网格。但我无法让图像正确对齐。并具有正确的响应大小。我正在尝试创建类似这样的东西 dealsource.tech .感觉自己真的很失败。任何见解都会非常有帮助。

.row-one {
  list-style: none;
  font-size: 0px;
  margin-left: -2.5%;
}

.row-one li {
  display:inline-block;;
  padding: 10px;
  margin: 0 0 2.5% 2.5%;
  font-size: 16px;
  font-szie: 1rem;
  vertical-align: top;
  box-shadow: 0 0 5px #ddd;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.product-image img {
  max-width: 50%;
  height:auto;
  margin:0 0 10px;
}

.product-description h3 {
  text-align: center;
  margin: 0 0 5px;
}

.product-description p {
  text-align: center;
  font-size: .9em;
  line-height: 1.5em;
  color: #999;
}

<section class="section-three">
 <ul class="row-one">
  <li>
   <figure class="product-image"><img src="images/graphics cards/Asus GeForce GTX2.jpg" alt="Asus GeForce GTX2"></figure>
   <figcaption class="product-description"><h3>Asus GeForce GTX2</h3>
    <p>From $800 to <em>$500</em></p>
    <p>Dec 29, 2016</p></figcaption>
  </li>
  <li>
   <figure class="product-image"><img src="images/graphics cards/Gigabyte GT 420.jpg" alt="Gigabyte GT 420"></figure>
   <div class="product-description"><h3>Asus GeForce GTX2</h3>
    <p>From $800 to <em>$500</em></p>
    <p>Dec 29, 2016</p></div>
  </li>
  <li>
   <figure class="product-image"><img src="images/graphics cards/Gigabyte Geforce GTX 1050.jpg" alt="Gigabyte Geforce GTX 1050"></figure>
   <figcaption class="product-description"><h3>Asus GeForce GTX2</h3>
    <p>From $800 to <em>$500</em></p>
    <p>Dec 29, 2016</p></div></figcaption>
  </li>
  <li>
   <figure class="product-image"><img src="images/graphics cards/Gigabyte     GT 420.jpg" alt="Gigabyte GT 420"></figure>
   <div class="product-description"><h3>Asus GeForce GTX2</h3>
    <p>From $800 to <em>$500</em></p>
    <p>Dec 29, 2016</p></div>
  </li>
 </ul>
</section>

Answer 1

最简单的方法是通过 flex-box

https://jsfiddle.net/ASAP/qbxtgmf0/1/

.flexbox {
  display: flex;
  flex-flow: row wrap;
  width: 440px; /* 4 items * item width(100+5+5) = 440 */
}

.flexbox .flex-item {
  padding: 5px;
}