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以创建多个项目并在此处添加了一个小提琴 http://jsfiddle.net/tVMet/

为你的div提供浮动，在第三个结束时给一个div清除浮动。

<div class="clear" />



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

Answer 2

这可以使用HTML中的表格轻松完成。或者如果您更喜欢没有表格单元格的div，那么请尝试float: left以获取需要彼此相邻的三个div。在每一组之后，给出一个换行符。这是为了避免所有这些都在同一条线上。

Answer 3

HTML：

    <div class="imagediv">

    <div class="imageitem"> // image content and stuff </div>
    <div class="imageitem"> // image content and stuff </div>
    <div class="imageitem"> // image content and stuff </div>

    <div class="clearfloat"></div>

    <div class="imageitem"> // image content and stuff </div>
    <div class="imageitem"> // image content and stuff </div>
    <div class="imageitem"> // image content and stuff </div>

    <div class="clearfloat"></div>

    </div>

CSS：

.imageitem {
   float:left;
}

.clearfloat {
   clear:both;
}

如何安排3行的图像div？

3 个答案: