文字在小屏幕上消失

Question

我创建了一个带有css网格的图库，并在每张图片下方添加了一个标题。这个网格是完全响应的，但我有一个问题。图像下方的文字在小屏幕上消失或隐藏在其他图像后面。

我希望标题也能保持在小屏幕上的图像下方。我怎样才能解决这个问题？

这是HTML和CSS代码：

＆＃13;

＆＃13;

DeleteFileW

＆＃13;

KERNEL32.dll

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的标题不是消失，它是在图像下面，为了解决这个问题，我会在断点上留出一些空间，这样你就可以让文本有一些空间了。

@media only screen and (max-width: 800px) {
    .desc{
    margin: 0px;
  }
  .gallery {
    margin-bottom: 25px;
  }
}

希望这会有所帮助:)

.container {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
}

.imageone {
  justify-content: center;
}

.desc {
  font-size: 30px;
  text-align: center;
}

.gallery {
  width: 300px;
  height: 200px;
  border: 2px solid #000;
}

.gallery img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.gallery:hover {
  border: 2px solid #ff00ff;
}

h1 {
  text-align: center;
  font-size: 40px;
}

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 1000px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 800px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr;
  }
    .desc{
    margin: 0px;
  }
  .gallery {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 400px) {
  .container,
  .imageone {
    grid-template-columns: 1fr;
  }
}

<h1>Image Gallery</h1>



<div class="container">

  <div class="imageone">

    <div class="gallery">
      <a target="_blank" href="1.jpg">
        <img src="1.jpg"></a>

      <p class="desc">Image One</p>

    </div>
  </div>

  <div class="imageone">


    <div class="gallery">
      <a target="_blank" href="2.jpg">
        <img src="2.jpg"></a>

      <p class="desc">Image Tow</p>
    </div>
  </div>

  <div class="imageone">

    <div class="gallery">
      <a target="_blank" href="3.jpg">
        <img src="3.jpg"></a>

      <p class="desc">Image Three</p>
    </div>
  </div>
  <div class="imageone">
    <div class="gallery">

      <a target="_blank" href="4.jpg">
        <img src="4.jpg"></a>

      <p class="desc">Image Four</p>



    </div>
  </div>
</div>

</body>

</html>

Answer 2

另一种解决方案是：

如果你不想使用溢出元素，你可以分隔文本和图像块div，然后你可以设置父div的宽度，这样文本元素将保持在中心。

.container {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
}

.imageone {
    justify-content: center;
    width: 300px;

}


.desc {
    font-size: 30px;
    text-align: center;
    margin:0px;
    }



.gallery {
    width: 300px;
    height: 200px;
    border: 2px solid #000;
}

.gallery img {
    width: 100%;
    height: 100%;
    vertical-align: middle;

}

.gallery:hover {
    border: 2px solid #ff00ff;
}

h1 {
    text-align: center;
    font-size: 40px;
}

* {
    box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .container, .imageone {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media only screen and  (max-width: 1000px) {
  .container, .imageone {
  grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 800px) {
  .container, .imageone  {
  grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 400px) {
  .container, .imageone {
  grid-template-columns: 1fr;
  }
}

<div class="container">
  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="1.jpg">
        <img src="1.jpg"></a>
    </div>
    <p class="desc">Image One</p>
  </div>
  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="2.jpg">
        <img src="2.jpg"></a>
    </div>
    <p class="desc">Image Tow</p>
  </div>
  <div class="imageone">

    <div class="gallery">
      <a target="_blank" href="3.jpg">
        <img src="3.jpg"></a>
    </div>
    <p class="desc">Image Three</p>
  </div>
  <div class="imageone">
    <div class="gallery">

      <a target="_blank" href="4.jpg">
        <img src="4.jpg"></a>
    </div>
    <p class="desc">Image Four</p>
  </div>
</div>