Question

line

我希望水平显示与本网站的工作方式类似的图像：https://www.twitch.tv/directory

但我的清单并没有出现类似的内容。它垂直列出图像。如果它有帮助，我正在使用的网页正在zetaboard上托管。

Answer 1

最简单的方法可能是使用带有flex-wrap

的flexbox

＆＃13;

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

＆＃13;

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

＆＃13;

或者您可以使用inline-block

＆＃13;

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

＆＃13;

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

＆＃13;

或float元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这可以通过三种不同的规则来实现。

规则1：

Fatal error: Uncaught exception 'mysqli_sql_exception' with message 
'Malformed packet' in /home/cgroschupff/public_html/custom_code/DB 
structure.php:16 Stack trace: #0 /home/cgroschupff/public_html/custom_code/DB structure.php(16): 
mysqli_store_result(Object(mysqli)) #1 {main} thrown in 
/home/cgroschupff/public_html/custom_code/DB structure.php on line 16

规则2：

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

规则3：

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

注意：Internet Explorer 9及更早版本不支持flex属性。

注意：Internet Explorer 10支持替代的-ms-flex属性。 IE11和更新版本完全支持flex属性（不需要-ms-前缀）。

注意：Safari 6.1（和更新版本）支持替代的-webkit-flex属性。

使用html在网页上水平列出图像？

2 个答案: