Question

我的网站主页上有一个产品网格，当您将鼠标悬停在图像上方时，它应该会显示更多信息。我让它起作用了，但是当我想添加更多彼此相邻的产品时，我只能看到一个产品。在我的 CSS 中，我将位置属性从绝对更改为相对，这显示了更多产品。唯一的问题是，当我将鼠标悬停在此之上时，我产品下的任何文本都会更改布局。如何在不发生这种情况的情况下将 div 放在一起？

.home-products {
  width: auto;
  height: 250px;
}

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

.product-grid {
  position: absolute;
  background-color: white;
  z-index: 1;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  width: 225px;
  padding-bottom: 15px;
}

.product-grid h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}

.product-overlay-button {
  background: #85bf31;
  height: 550px;
  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;
}

.product-grid:hover {}

.product-info {
  display: none;
  width: 225px;
  text-align: center;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
}

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

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

.product-grid:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

CodePen

Answer 1

我已经使用了您的代码并对其进行了更新以满足您的要求。现在解释一下我所做的是，您使用了 float:left，这会导致下部文本漂浮在产品网格旁边，现在我删除了该代码并将 display:flex 添加到它的父级，即 home -products 还添加了 flex-wrap:wrap 以保持响应性。

flex-wrap 属性 指定柔性项目是否应该换行。当它设置为 wrap 时，它指定灵活（弹性项目）项目将在必要时换行

注意：尝试在整页中打开代码段以查看响应情况

.home-products {
/*   width: auto; */
/*   height: 250px; */
  display:flex;
  flex-wrap: wrap;
}

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

.product-grid {
  position: relative;
  background-color: white;
  z-index: 1;
/*   float: left; */
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  width: 225px;
  padding-bottom: 15px;
}

.product-grid h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}

.product-overlay-button {
  background: #85bf31;
  height: 550px;
  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;
}

.product-grid:hover {
}

.product-info {
  display: none;
  width: 225px;
  text-align: center;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
}

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

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

.product-grid:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

Answer 2

好的开始是添加

max-height: 225px;
overflow: visible;

到产品网格

我怎样才能把我的 div 放在一起？

2 个答案: