使用图片和文字时奇怪的定位行为

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> 

更优雅和方便比随地吐痰跨越所有的地方

希望这有助于