htmlを使用してウェブページ上に画像を横に並べる？

Question

<div id="FirsRowImg"> 
 
    <div class="ImgCell"> 
 
    <a class="linkopacity" href="services_backdrops.html" > 
 
     <img src="https://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-272x380.jpg" border="0" > 
 
     <p>Backdrops &amp; Drapes</p> 
 
    </a> 
 
    </div> 
 
    <div class="ImgCell"> 
 
    <a class="linkopacity" href="services_balloons.html" > 
 
     <img src="https://static-cdn.jtvnw.net/ttv-boxart/For%20Honor-272x380.jpg" border="0" > 
 
     <p>Balloons</p> 
 
    </a> 
 
    </div> 
 
...etc etc... 
 
</div>

私はこのウェブサイトは、彼らをどうするかに水平に類似した画像を表示したい：https://www.twitch.tv/directory

が、私のリストには、そのようなものを出てきません。画像を縦方向にリストします。役立つなら、私が使っているウェブページはzetaboardでホストされています。

Answer 1

最も簡単な方法は、おそらくflex-wrap

#FirsRowImg { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.ImgCell { 
 
    margin: 0 1em 1em 0; 
 
}

<div id="FirsRowImg"> 
 
     <div class="ImgCell"> 
 
     <a class="linkopacity" href="services_backdrops.html" > 
 
      <img src="https://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-272x380.jpg" border="0" > 
 
      <p>Backdrops &amp; Drapes</p> 
 
     </a> 
 
     </div> 
 
     <div class="ImgCell"> 
 
     <a class="linkopacity" href="services_balloons.html" > 
 
      <img src="https://static-cdn.jtvnw.net/ttv-boxart/For%20Honor-272x380.jpg" border="0" > 
 
      <p>Balloons</p> 
 
     </a> 
 
     </div> 
 
    </div>

とフレキシボックスを使用しているまたはあなたがinline-block

.ImgCell { 
 
    display: inline-block; 
 
    margin: 0 1em 1em 0; 
 
}

<div id="FirsRowImg"> 
 
     <div class="ImgCell"> 
 
     <a class="linkopacity" href="services_backdrops.html" > 
 
      <img src="https://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-272x380.jpg" border="0" > 
 
      <p>Backdrops &amp; Drapes</p> 
 
     </a> 
 
     </div> 
 
     <div class="ImgCell"> 
 
     <a class="linkopacity" href="services_balloons.html" > 
 
      <img src="https://static-cdn.jtvnw.net/ttv-boxart/For%20Honor-272x380.jpg" border="0" > 
 
      <p>Balloons</p> 
 
     </a> 
 
     </div> 
 
    </div>

を使用することができます

それともfloat要素

#FirsRowImg { 
 
    overflow: auto; 
 
} 
 
.ImgCell { 
 
    float: left; 
 
    margin: 0 1em 1em 0; 
 
}

<div id="FirsRowImg"> 
 
     <div class="ImgCell"> 
 
     <a class="linkopacity" href="services_backdrops.html" > 
 
      <img src="https://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-272x380.jpg" border="0" > 
 
      <p>Backdrops &amp; Drapes</p> 
 
     </a> 
 
     </div> 
 
     <div class="ImgCell"> 
 
     <a class="linkopacity" href="services_balloons.html" > 
 
      <img src="https://static-cdn.jtvnw.net/ttv-boxart/For%20Honor-272x380.jpg" border="0" > 
 
      <p>Balloons</p> 
 
     </a> 
 
     </div> 
 
    </div>

Answer 2

これは、3つの異なるルールで可能です。

ルール1：

.ImgCell{display: inline-block;width: 49%;} 

ルール2：

.ImgCell{float:left;width: 50%;} 

ルール3：

#FirsRowImg {display: flex;flex-wrap: wrap;} 

注：Internet Explorer 9の以前のバージョンでは、フレックスプロパティをサポートしていません。

注：Internet Explorer 10は、代替の-ms-flexプロパティをサポートしています。 IE11以降のバージョンはflexプロパティを完全にサポートしています（-ms-プレフィックスは必要ありません）。

注：Safari 6.1（およびそれ以降）では、代替の-webkit-flexプロパティをサポートしています。