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

图像很难控制它们的位置，因为它们是内联元素。您可以改为使用<div>或将图片的display属性设置为block。

Answer 2

product-image类仅包含您要调整大小的图像，并且不会引用相关图像。为了正确执行此操作，您应该使用div标记，例如div id="product-image"，并将height和width属性设置为您想要的任何内容。

Answer 3

最简单的方法是通过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;
}

使用HTML＆amp; amp;创建4x5图像网格CSS

3 个答案: