jQuery动画的相对定位在列表内定位绝对

Question

我正在尝试实现水平列表的动画。

喜欢

• 项目 1 * 项目 2 * 项目 3 * 项目 4

但一次只能看到两个项目。

每个项目都包含一个带有图片、文本和链接的 div。图片应始终与顶部对齐，而链接应始终与底部对齐。

<ul>
<li><div>
<img src="somepic"/>
<p>SomeText</p>
<a href="url">Link</a>
</div></li>
<li><div>
<img src="somepic2"/>
<p>SomeText2</p>
<a href="url2">Link2</a>
</div></li>
</ul>

这就是问题所在，列表项必须使用“postition:relative”定位，如果我在 div 内使用绝对定位，动画就会混乱。我通过添加和添加到列表来制作动画。

有没有人对此有一个很好且简单的解决方案？

编辑：

这是一个示例：http://jsfiddle.net/39bhW/

我认为我需要在列表项中进行绝对定位...

Answer 1

所以基本上你希望一次显示 2 个项目，对吗？

嗯，把.placeholder的宽度改成320px

Answer 2

当您对元素应用定位时，它将使用其父元素上可用的定位。如果没有提供，它将定位到 body 元素。因此，当您 position: absolute 获取元素底部的文本/链接时，您必须 position: relative（或 position: absolute）它的其中一个父级，否则它不会知道您希望它与哪个相关到。相反，无论它先找到哪个，它都会使用该元素来定位。

我认为你可能有太多标记来完成你在这里所做的事情（.placeholder 是什么？为什么不直接使用li？），以及包装的spans其中一个块看起来不合适（如果你真的需要一个包装器，应该是div）。而且我不确定，但是如果您需要重用它，您可能想将#items 更改为一个类。它看起来不适合id。而且你的 id 和类名没有描述性，你的选择器不够具体（一般来说，远离ul 和li 来设置页面特定部分的样式，因为它们具有全局效果）。

不过，我认为这正是您要找的。注意我如何在#items li 上使用padding，然后补偿bottom: 5px。如果img 标签只是位于块的顶部，您也不需要定位它，居中。

HTML（片段）

<li>
    <div class="itemplaceholder">
        <img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
        <p>
            Test title<br/>
            Description A
            <a href="#">Link</a>
        </p>
    </div>
</li>

CSS

#items {
    display: inline;
    position:relative;
    margin: 0;
    padding: 0;
}
#items li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
}
#items .itemplaceholder {
    height:200px;
    width:160px;
    text-align: center;
    position: relative;
}
.placeholder {
    width:640px;
    height:200px;
    overflow: hidden;
}
.content {
    width:800px;
    height:240px;
}
#items .itemplaceholder p {
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 50%;
}
#items .itemplaceholder p a {
    position: absolute;
    display: block;
    bottom: 0;
    text-align: center;
    width: 100%;
}

http://jsfiddle.net/39bhW/3/