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

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

我为每个列表项添加了红色边框，以便更好地理解。

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

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

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

Answer 3

这是我用jQuery做的：

首先，我将文档就绪函数修改为一个窗口加载函数（它会等到图像加载完毕，因此jQuery可以告诉加载图像的高度） -

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

然后我将其添加到image.each()电话：

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

将list元素设置为与其子图像相同的高度，并使用额外的4个像素来容纳顶部和底部的边框宽度。

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

此外，您可以将其设为调整大小事件并加载，以便保持这种状态：

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

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

我知道你已经选择了答案，但无论如何我还在努力，为什么不分享？

图片库li高度无法重新调整

3 个答案: