扩展 div 的内容而不移动其下方的元素

Question

我在页面上有一个元素，当鼠标悬停在该元素上时，它会展开并显示其中一些先前隐藏的文本。问题是当元素展开时，它会将其他内容移动到它下面。我尝试使用position:absolute，但没有达到预期的效果

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  /*position: absolute;*/
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

我的代码：https://codepen.io/eren5897/pen/GRqgOyd

Answer 1

将 min-height 添加到您的行 class

你的class变成了

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
min-height: 317PX;}

Answer 2

添加如何

.row {
  min-height: 20rem
}

这可以确保它们在展开 div 时不会移动。

Answer 3

其实你已经不远了。 position:absolute 是要走的路，但您需要一些额外的样式才能使其正常工作，主要是为了正确定位它并使其共享其父项的背景颜色。

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  background: inherit;
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

扩展 div 的内容而不移动其下方的元素

Expanding a div with content without moving elements below it

html

css

css-position

bootstrap-4