jquery - 图片库 li 高度未重新调整

Question

我遇到了 an li 高度的问题。

Here is a codepen with the issue.

 <div class="row fp-gallery">
  <ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2">
    <li>
      <a href="#"><img src="https://placehold.it/200X200" /></a>
      <div class="description">
        <h4>Title</h4>
        <p>Words about the image</p>
      </div>
    </li>

    <li>
      <a href="#"><img src="https://placehold.it/200X200" /></a>
      <div class="description">
        <h4>Title</h4>
        <p>Words about the image</p>
      </div>
    </li>

    <li>
      <a href="#"><img src="https://placehold.it/200X200" /></a>
      <div class="description">
        <h4>Title</h4>
        <p>Words about the image</p>
      </div>
    </li>
    <li>
      <a href="#"><img src="https://placehold.it/200X200" /></a>
      <div class="description">
        <h4>Title</h4>
        <p>Words about the image</p>
      </div>
    </li>
</div>

正如您在此处看到的，我构建了一个包含 4 个列表项的无序列表。每个列表项都包含一个带有图像的链接和一个描述 div。出于定位原因，描述位于列表项内，这将 div 放置在图像下方。使用 CSS，我将描述 div 重新定位在图像的顶部。

我的问题是，即使在重新定位描述之后，列表项仍然保持其形状，就好像描述仍然位于图像下方一样。这会导致悬停处理程序出现问题，允许您通过将鼠标悬停在图像下方的空白区域来触发悬停。

为了更好地理解，我给每个列表项都加上了红色边框。

我希望每个列表项与其包含的图像高度相同。

附言。我正在使用 Foundation 的 block 网格来构建我的图片库。

Answer 1

你应该使用 position:absolute 作为 .description

.fp-gallery .description {
    position: absolute;
}

除此之外，您需要将其父级设置为 position:relative

.fp-gallery ul li {
    position: relative;
}

更新的代码笔可在以下位置获得 http://codepen.io/anon/pen/LVqqoB