html 中的重叠图像

Question

我将一张图片放在响应式 CSS 网格中，它仅在移动视图中看起来不错，但在桌面视图中图片相互重叠。

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: auto;
  margin: 0;
  max-width: 1000px;
  gap: 20px;
}

.posts * {
  box-sizing: border-box;
}

.post {
  font-family: montserrat;
  text-decoration: none;
  color: #000;
  margin: 2.5px 5px;
  width: 280px;
}

.postthumb {
  width: 280px;
  height: 200px;
  margin: 0;
}

.posttitle {}

<div class="grids">
  <main>
    <div class="posts">
      <a href="#" target="_blank" class=post>
        <img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb">
        <h3 class="posttitle">Hello World is the title of this Post</h3>
      </a>
      <a href="#" target="_blank" class=post>
        <img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb">
        <h3 class="posttitle">Hello World is the title of this Post</h3>
      </a>
    </div>
  </main>
</div>

Answer 1

问题是：.postthumb { width: 280px; }

该行覆盖图像的宽度并使其可能大于 grid-column。因此，当列小于 280 像素时，图像会重叠。

同样适用于 .post { width: 280px; } 这将扩展 ehader 行，可能会比 grid-column 更早并与标题重叠。

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: auto;
  margin: 0;
  max-width: 1000px;
  gap: 20px;
}

.posts * {
  box-sizing: border-box;
}

.post {
  font-family: montserrat;
  text-decoration: none;
  color: #000;
  margin: 2.5px 5px;
}

.postthumb {
  height: 200px;
  margin: 0;
}

.posttitle {}

<div class="grids">
  <main>
    <div class="posts">
      <a href="#" target="_blank" class=post>
        <img src="https://via.placeholder.com/150/0000FF/808080.com" alt="" class="postthumb">
        <h3 class="posttitle">Hello World is the title of this Post</h3>
      </a>
      <a href="#" target="_blank" class=post>
        <img src="https://via.placeholder.com/150/FF0000/808080.com" alt="" class="postthumb">
        <h3 class="posttitle">Hello World is the title of this Post</h3>
      </a>
    </div>
  </main>
</div>

Answer 2

感谢大家，我已经弄明白了:)

它在：

grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));

minmax 仅为 225px，但图像宽度为 280px。所以我需要将 minmax 从 225px 增加到 280px。谢谢:)

html 中的重叠图像

Overlapping images in html

html

css

image

css-grid

overlapping