定位絕對的內部列表與定位相對jQuery動畫

像

*項目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：相對」如果我用裏面的DIV絕對定位的動畫被搞砸。我通過追加和預先添加到列表來設置動畫。

有沒有人有一個很好的和簡單的解決方案呢？

編輯：

這裏有一個例子：http://jsfiddle.net/39bhW/

我想我需要的定位是列表項中的絕對...

來源

2012-03-03 johan

也許你解釋你的問題更實際的小提琴鏈接或東西嗎？你描述的限制是模糊的，你可以將鏈接絕對地設置到DIV的底部嗎？ – David 2012-03-03 21:38:11

每當你使用絕對位置記住沒有CSS尺寸的元素有0寬度和高度 – charlietfl 2012-03-03 21:49:52

請粘貼你的代碼在這裏：http://jsfiddle.net/ – Alp 2012-03-03 21:55:18

當您將定位到一個元素，它會使用可用的定位上它的父母。如果沒有提供，它將定位到body元素。因此，當您在元素底部獲得文字/鏈接時，您必須爲position: relative（或position: absolute）其父母之一，否則它不會知道您希望將其放在哪個位置。相反，無論先發現哪一個，它都會使用該元素進行定位。

我認爲這是可能的，你已經有了太多的標記來完成你在這裏做什麼（什麼是.placeholder呢？爲什麼不直接使用li？），以及span s表示包裹塊長相之一不合適的（如果你真的需要包裝的話，應該是div）。我不確定，但如果您需要重新使用它，您可能需要將#items更改爲類。它看起來不像id。而你的id和class名稱不具有描述性，你的選擇器不夠具體（通常，遠離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/

來源

2012-03-04 16:36:26

非常感謝！但是，這在IE7中的工作令人難以置信，你不知道如何解決這個問題？ – johan 2012-03-04 20:09:36

這是兩個問題的組合：在'p'和'a'上使用'left：0'，[參見IE 6/7對'position：relative'和'overflow：hidden''的錯誤處理]（http：// stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-overflow-hidden-position-relative-combo）。你可以通過給'ul'設置一個寬度/高度和'overflow：hidden'來「固定」第二個。 [在這裏演示]（http://jsfiddle.net/39bhW/6/）。 – 2012-03-04 20:47:48

「將定位應用於元素時，它將使用其父母上的可用定位，如果沒有提供定位，它將定位到身體元素。」 - 拯救了我的生命：D – Sorin 2015-10-14 14:10:13

所以基本上你想有2項在可見光有一次，我是對的嗎？

精良，.placeholder寬度改爲320px

來源

2012-03-04 10:30:38 Joseph

這不是什麼大不了的事。我想鏈接對齊底部和文本是在同一級別，而不管圖像大小 – johan 2012-03-04 10:34:14

文本與什麼水平相同？ – Joseph 2012-03-04 10:37:58

每個項目在同一高度。讓我們說從div的底部40px。 – johan 2012-03-04 10:43:07

定位絕對的內部列表與定位相對jQuery動畫

回答

相關問題