html中的重叠图像答案

【问题标题】：Overlapping images in htmlhtml中的重叠图像
【发布时间】：2021-09-22 14:57:07
【问题描述】：

我将图像放在响应式 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>

【问题讨论】：

你能发布一个工作示例吗？
呃，我不知道该怎么做？？？？

标签： html css image css-grid overlapping

【解决方案1】：

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

那条线会覆盖图像的宽度并使其可能大于网格列。因此，当列小于 280 像素时，图像会重叠。

.post { width: 280px; } 也是如此，这将扩展 ehder 行，可能会比网格列更远，并与标题重叠。

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

【讨论】：

谢谢 :) 我能做什么？请帮忙

【解决方案2】：

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

它在：

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

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

【讨论】：