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