讓孩子DOM元素進行HTML和JavaScript父DIV的邊界上徘徊

這是很難的標題來概括的問題到底是什麼這裏這麼詳細信息...讓孩子DOM元素進行HTML和JavaScript父DIV的邊界上徘徊

我有一個形象-gallery由包含圖像的列表元素（以及用於顯示文本標籤的跨度）組成。 HTML佈局是這樣的：

  <div class="caracteristics_list gallery"> 

       <ul class="thumb"> 
        <li><a href="#"><span class="video">Play</span><img src="images/gallery1.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery1.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery1.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li> 
        <li><a href="#"><span class="tagline">Lorem ipsum</span><img src="images/gallery3.jpg" alt="" /></a></li> 
        <li><a href="#"><span class="tagline">Lorem ipsum</span><img src="images/gallery3.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery3.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery3.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery4.jpg" alt="" /></a></li> 
        <li><a href="#"><img src="images/gallery4.jpg" alt="" /></a></li> 
       </ul>      
      </div>

這個畫廊有放大效應（taken from this guide（demo））

這裏美中不足的是，畫廊有一個固定的寬度和高度和overflow: scroll（它不會增長，它包含在該圖庫div的範圍內）。

這意味着，縮放效果會被溢出CSS設置截斷。

我現在有一個例子（雖然有破碎的圖像）can be seen on jsfiddle here。

我擔心溢出約束會使這個方法變得不可能，除非我把圖元從圖庫div中取出，並將它完全放在相同的位置，絕對或相對位置。

但首先我想確保這是唯一的出路。你有什麼想法嗎？

來源

2011-07-01 Sander

不要取出圖像，複製它並顯示出div。在需要關閉時銷燬對象

來源

2011-07-01 14:32:55 hungryMind

這實際上是我需要做的但由於時間不足，我們決定更改已溢出的div，現在它有足夠的填充，而不是覆蓋項目在它後面。因爲我們沒有無盡的高度（有限的項目）的問題，我們沒有滾動的問題，其中一個項目將是一半可見或再次在底部覆蓋。所以你的解決方案實際上是正確的，但我們選擇了一種適用於我們情況但不適用於任何情況的骯髒解決方案。謝謝 – Sander

讓孩子DOM元素進行HTML和JavaScript父DIV的邊界上徘徊

回答

相關問題