将文本放在图像下的更好方法？

Question

我很难弄清楚这一点。当我第一次尝试让文字留在图片下方时，它一直是floated。这段代码似乎有效，但我认为我做错了，因为当您将 .resmontage ul 宽度从 70% 更改为 60% 时，所有图片都会变小。它们不会停留在我最初指定的width 或height 中。

为什么我需要将.resmontage img 设置为width: 100% 才能使其与.resmontage li 一起使用？如果我从resmontage li 中删除宽度，一切都会搞砸！我知道你可以使用 bootstrap，但我更喜欢自己做。

#bt {
  color: white;
  margin-top: 1%;
  margin-left: -8%;
}
.resmontage ul {
  float: left;
  background-color: black;
  width: 70%;
  height: 25%;
  padding-left: 7%;
  margin-top: 1%;
  border-radius: 1%;
}
.resmontage li {
  list-style-type: none;
  width: 20%;
  margin-top: 1%;
  float: left;
  padding-right: 3%;
}
.resmontage img {
  width: 100%;
  height: 65%;
}
.hello {
  text-align: center;
  color: white;
  margin-top: 2%;
}
.clearfix:after {
  content: "";
  display: both;
  clear: both;
}

<div class="resmontage clearfix">
  <ul>
    <div id="bt">Games that will be released next month.</div>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" />
      <div class="hello">Gta v</div>
    </li>

    <li>
      <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" />
      <div class="hello">CSGO</div>
    </li>

    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" />
      <div class="hello">Rocket League</div>
    </li>

    <li>
      <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" />
      <div class="hello">Witcher 3</div>
    </li>

  </ul>
</div>

Answer 1

您已经通过将图像放置在各种li 中来设置图像的width。当您指定他们拥有width: 100% 时，您只是告诉他们占用他们的容器，即li，其中有width 的20%。

#bt {
  color: white;
  margin-top: 1%;
  margin-left: -8%;
}
.resmontage ul {
  float: left;
  background-color: black;
  width: 70%;
  height: 25%;
  padding-left: 7%;
  margin-top: 1%;
  border-radius: 1%;
}
.resmontage li {
  list-style-type: none;
  width: 20%;
  margin-top: 1%;
  float: left;
  padding-right: 3%;
}
.resmontage img {
  width: 100%;
  height: auto;
}
.hello {
  text-align: center;
  color: white;
  margin-top: 2%;
}

<div id="bt">Games that will be released next month.</div>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" />
      <div class="hello">Gta v</div>
    </li>

    <li>
      <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" />
      <div class="hello">CSGO</div>
    </li>

    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" />
      <div class="hello">Rocket League</div>
    </li>

    <li>
      <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" />
      <div class="hello">Witcher 3</div>
    </li>

  </ul>
</div>