使用圖片和文字時奇怪的定位行爲

Question

jsFiddle

我試圖水平輸出圖像和文字。文本元素使用jQuery Cycle Lite Plugin在單詞列表上循環。正如你可以在上面的jsFiddle中看到的那樣，循環文本元素在頁面上，但由於某些原因，元素的位置被搞亂了。一些文本元素出現在圖像上，然後在最後有一堆堆疊在一起。這是什麼造成的？

我知道有一些插件，如jQuery Masonry，可能能夠自動定位元素，但我需要維護HTML輸出它們的順序。我真正需要的是讓文字元素與圖片交織在一起，以便它們全部可見，而不會混雜在一起並出現在彼此之上。

感謝您的閱讀。

編輯：

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/javascript"></script> 

      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="a"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="b"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="c"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <a href="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" rel="temp1"><img src="http://www.andynortnik.com/gif/st-patricks-day-clipart.gif" /></a> 
      <span id="d"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="e"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="f"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="g"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="h"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="i"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 
      <span id="j"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></span> 

的Javascript：

$(document).ready(function() { 
    $('#a').cycle(); 
    $('#b').cycle(); 
    $('#c').cycle(); 
    $('#d').cycle(); 
    $('#e').cycle(); 
    $('#f').cycle(); 
    $('#g').cycle(); 
    $('#h').cycle(); 
    $('#i').cycle(); 
    $('#j').cycle(); 
}); 

編輯2：

這裏是代表什麼，我試圖做一個形象。藍色方塊是圖像，紅色方塊代表我想讓單車文字出現的區域。

Answer 1

好吧，你的編輯之後，下面是不準確的版本LY你想要什麼：jsfiddle.net/PcD8njsfiddle.net/AcPxx

我把TinyURL的-ifying您的圖像的自由，因爲它們使代碼笨重。另外，爲了簡潔，我刪除了包裝<a>標籤。如果你喜歡，你可以添加它們。

最後，我從循環器中刪除了id，因爲它們在您給我們的代碼的上下文中不是必需的。

Answer 2

我懷疑<span>的使用，內聯元件，是佈局問題的一部分，因爲演示使用<div>，這是一個塊級元素。

進一步的調查顯示，您的span[id]元素沒有指定高度（因爲它們是內聯的），所以得到的隱含高度爲0px。因此，奇怪的堆疊。

Answer 3

不太明白你試圖做
+上的jsfiddle你的例子是有點這裏被打破 是http://jsfiddle.net/avipinto/F95x3/2/
我把圖像之間的跨度您的標記更簡單（我希望）版本顯示圖像之間的過渡，因爲您將相同的圖像全部提供給它們。

如果您的所有問題都是將文本放置在幻燈片下方，然後給容器的圖像高度。
如果你想不同的標題，以每個圖像 - 看看插件的頁面的源代碼 - 他用下面的代碼：

$('#slideshow3').cycle({ 
     delay: 2000, 
     speed: 500, 
     before: onBefore 
    }); 

    function onBefore() { 
     $('#title').html(this.alt); 
    } 

和HTML：

<div id="slideshow3" class="pics"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Panama City" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Heading to the water" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Danny" /> 
</div> 

更優雅和方便比隨地吐痰跨越所有的地方

希望這有助於