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

最簡單的方法可能使用與Flexbox的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

這可能是在三個不同的規則。

規則1：

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

規則2：

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

規則3：

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

注：Internet Explorer 9的和早期版本不支持Flex屬性。

注意：Internet Explorer 10支持另一種-ms-flex屬性。 IE11和更新版本完全支持flex屬性（不需要-ms-前綴）。

注意：Safari 6.1（和更新版本）支持-webkit-flex屬性。