图片库 li 高度未重新调整

Question

我运行对一里的身高有意见。

 <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 个列表项的无序列表。每个列表项都包含一个带有图像的 link 和一个描述 div。出于定位原因，描述位于列表项内，这将 div 放在图像下方。使用 CSS，我将描述 div 重新定位在图像的顶部。

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

为了便于理解，我给每个列表项都加了红色边框。

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

PS。我正在使用 Foundation 的块网格来构建我的图片库。

Answer 1

我不确定你想要什么，但你可以试试这个。

.fp-gallery ul li {
  text-align: center;
  height: auto;
  border: 2px solid red;
  position:relative;
  padding:0px 0px 100px 0px !important;
}

.fp-gallery .description {
  text-align: center;
  width: 100%;
  display: block;
  background-color: $darkblue;
  color: $white;
  bottom: 0px;
  opacity: 0;
  transition: .3s all ease;
  position: absolute;
}

Answer 2

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

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

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

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

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

Answer 3

这是我对 jQuery 所做的：

首先，我将文档就绪函数修改为 window 加载函数（它将等待图像加载完毕，因此 jQuery 可以判断加载图像的高度）-

$(window).load(function(){...

然后我将其添加到 image.each() 调用中：

$(this).css('height', $(this).find('img').height() + 4);

将列表元素设置为与其子图像相同的高度，并额外增加 4 个像素以容纳顶部和底部的边框宽度。

http://codepen.io/anon/pen/mJvvZY

此外，您可以将其设置为调整大小事件和加载，使其保持原样：

$(window).on('load resize', function() {...

http://codepen.io/anon/pen/yNZZmM

我知道你已经选好了答案，但我一直在努力，为什么不分享呢？

图片库 li 高度未重新调整

Image gallery li height not re-adjusting

html

css

jquery

zurb-foundation