jquery - 如何以 3 行排列图像 div？

Question

大家好，我有很多具有类名的 div，例如 ItemLeft、ItemMiddle 和 ItemRight。我想知道如何使用 css 或任何简单的方法连续显示这些图像 div 3(目前所有图像都显示一个在彼此下面)？

我从 getjson 调用中获取图像 div，如下所示:

$.getJSON('http://www.awebsite.com/get?url=http://www.bwebsite.com/moreclips.php&callback=?', function(data){
    //$('#output').html(data.contents);

 var siteContents = data.contents;  

document.getElementById("myDiv").innerHTML=siteContents

注意:每次我调用 getjson 时，我都会返回 6 个图像 div，它们全部显示在彼此下方，而不是连续显示 3 个!

这是通过调用 getjson 检索到的 div 图像，但所有这些图像 div 都在彼此下方而不是 3 行:

<div class="ItemLeft">


  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id1234" title="galaxy">
      <img class="ItemImage" src="/Images/galaxyimg.jpg" alt="galaxy" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id1234" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>

Answer 1

根据您的问题，我复制了您的 leftItem 以创建多个元素并在此处添加了一个 fiddle http://jsfiddle.net/tVMet/

为您的 div 提供 float ，第三个结尾只提供一个清除 float 的 div。

<div class="clear" />



.ItemLeft, .ItemMiddle, .ItemRight
{
    float:left;
}
.clear
{
    clear:both;
}