Question

<section>
  <style>
    div.img {
      border: 1px solid #ccc;
    }

    div.img:hover {
      border: 1px solid #777;
    }

    div.img img {
      width: 100%;
      height: auto;
    }

    div.desc {
      padding: 15px;
      text-align: center;
    }

    * {
      box-sizing: border-box;
    }

    .responsive {
      padding: 0 6px;
      float: left;
      width: 24.99999%;
    }

    @media only screen and (max-width: 700px) {
      .responsive {
        width: 49.99999%;
        margin: 6px 0;
      }
    }

    @media only screen and (max-width: 500px) {
      .responsive {
        width: 100%;
      }
    }

    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>

  <div class="responsive">
    <div class="img">
      <a target="_blank" href="img\aviary-image-1479454871589.jpeg">
        <img src="/img/aviary-image-1479454871589.jpeg" alt="A Boeing 747-400 descending" width="300" height="200">
      </a>
      <div class="desc">A Boeing 747-400 descending</div>
    </div>
  </div>


  <div class="responsive">
    <div class="img">
      <a target="_blank" href="img\Screenshot_2016-11-18-13-30-35-973.jpg">
        <img src="/img/Screenshot_2016-11-18-13-30-35-973.jpg" alt="Boeing 787-9 touching down" width="600" height="400">
      </a>
      <div class="desc">Boeing 787-9 touching down</div>
    </div>
  </div>

  <div class="responsive">
    <div class="img">
      <a target="_blank" href="img\Slack for iOS Upload.jpg">
        <img src="/img/Slack for iOS Upload.jpg" alt="Boeing 777-200ER climbing" width="600" height="400">
      </a>
      <div class="desc">A Boeing 777-200ER climbing</div>
    </div>
  </div>
</section>

请注意，这只是页面的一部分，这就是为什么没有起始标签等。

出于某种原因，我的画廊没有加载。图片已上传，但网站上没有任何图片显示。您可以在此处查看该网站：https://britishairways.000webhostapp.com/photos.html

我做错了什么？

谢谢！

Answer 1

将您的图库项目所在的<section>设为灵活容器。就像：

section {
  display: flex;
}

视觉参考：

Answer 2

持有三个图库图像的section高度为零。反过来，这是因为图库图像具有float:left，这会使它们脱离布局流程并导致其父级不使用它们的大小来计算其高度。

请参阅How do you keep parents of floated elements from collapsing?

图片库无法正常运作

2 个答案: