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

はそれを行うための最も簡単な方法は、「4×5のレイアウト」で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; 
} 

Answer 2

イメージ彼らは、インライン要素ですとしての位置を制御するのは難しいです。代わりに<div>を使用するか、画像のdisplayプロパティをblockに設定してください。

Answer 3

そのproduct-imageクラスには、サイズ変更する画像のみが含まれており、問題の画像は参照されません。これを正しく行うには、代わりにdiv id="product-image"のようなdivタグを使用し、heightとwidthのプロパティを任意の値に設定する必要があります。