如何实现产品网格Div横向并排且鼠标悬停时不打乱下方文本布局？

我来帮你搞定这个问题！你遇到的情况其实很常见——用absolute定位时产品没法横向并排，改成relative后又因为悬停时显示的额外信息撑开容器，搞乱了下方的布局。咱们一步步来调整，既实现产品横向排列，又保证悬停交互不影响整体布局：

核心问题分析 #

1. 最初用position: absolute时，产品元素脱离了文档流，所以只会显示最后一个产品，其他都被覆盖了。
2. 改成position: relative后，元素回到文档流，能并排显示，但悬停时.product-info从display:none变成display:block，会撑开.product-grid的高度，导致下方的文本/其他元素错位。

解决方案：用Flexbox实现横向布局 + 绝对定位放置悬停信息 #

我们可以通过两个关键调整来解决：

• 用Flexbox替代float实现产品横向并排，布局更稳定；
• 将.product-info设置为绝对定位，让它脱离文档流，显示时不会改变父容器的高度。

修改后的CSS代码

/* 父容器用Flexbox实现横向排列，自动换行 */
.home-products { 
  width: auto; 
  height: auto; /* 去掉固定高度，避免限制产品显示 */
  display: flex; 
  flex-wrap: wrap; /* 产品过多时自动换行 */
  gap: 6px; /* 替代margin控制产品间距，更方便 */
}

.product-image-home { 
  height: 200px; 
}

/* 保持relative作为绝对定位的父容器，去掉float */
.product-grid { 
  position: relative; 
  background-color: white; 
  z-index: 1; 
  text-align: center; 
  width: 225px; 
  padding-bottom: 15px; 
}

.product-grid h3 { 
  margin: 0; 
  text-align: center; 
  margin-bottom: 5px; 
  font-size: 20px; /* 修正原代码的语法错误，添加分号 */
  font-family: "Open Sans", Helvetica, Arial, sans-serif; /* 单独提取字体属性 */
}

/* 修正按钮的高度问题，原550px明显不合理 */
.product-overlay-button { 
  background: #85bf31; 
  height: auto; 
  border: none; 
  border-radius: 2px; 
  color: #fff; 
  font-weight: bold; 
  font-size: 14px; 
  padding: 0.6em 2em; 
  margin-top: 5px; 
  text-decoration: none; 
  text-align: center; 
  display: inline-block; /* 确保按钮正确响应padding */
}

/* 悬停时给产品网格加阴影 */
.product-grid:hover { 
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
  z-index: 10; /* 悬停时提升层级，避免被其他元素遮挡 */
}

/* 将产品信息设置为绝对定位，不占用文档流空间 */
.product-info { 
  display: none; 
  position: absolute; 
  top: 100%; /* 放在产品网格的正下方 */
  left: 0; 
  width: 100%; 
  text-align: center; 
  background-color: white; 
  padding: 10px; 
  box-sizing: border-box; /* 确保padding不会超出宽度 */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
  z-index: 10; 
}

.product-info p { 
  margin-left: 7px; 
  margin-right: 7px; 
}

.product-grid:hover .product-info { 
  display: block; 
}

修改后的HTML代码（结构不变，修正转义字符）

<div class="home-products">
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>In het bordspel Blood Rage neemt iedere speler de leiding over zijn eigen Viking clan. Ragnarök is hier en het einde van de wereld is op komst!</p>
      <a href="www.spelplaats.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
</div>
<p>Testing text</p>

关键修改说明 #

1. Flexbox布局：home-products用display:flex和flex-wrap:wrap，让产品自动横向排列，超出页面宽度时自动换行，比float更稳定，还能通过gap轻松控制产品间距。
2. 绝对定位悬停信息：.product-info设置为position:absolute，并以.product-grid（position:relative）为定位父容器，这样它的显示不会改变父容器的高度，也就不会导致下方的文本或产品错位。
3. 修正语法错误：原CSS中font-size: 20px "Open Sans"语法错误，拆分成font-size和font-family两个属性；同时修正了按钮的不合理高度550px，改成auto保证按钮正常显示。

内容的提问来源于stack exchange，提问作者PHV