1

こんにちは、ItemLeft、ItemMiddle、ItemRightなどのクラス名を持つ多くのdiv を取得しました。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 を呼び出すたびに、3 つ並んでいるのではなく、6 つの画像 div が返されます。

そして、これは 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>
4

3 に答える 3

1

あなたの質問に基づいて、私はあなたのleftItemを複製して複数のアイテムを作成し、ここにフィドルを追加しました http://jsfiddle.net/tVMet/

divにフロートを提供し、3番目の終わりにフロートをクリアするdivを指定します。

<div class="clear" />



.ItemLeft, .ItemMiddle, .ItemRight
{
    float:left;
}
.clear
{
    clear:both;
}
于 2013-03-21T02:23:25.473 に答える
0

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;
}
于 2013-03-21T02:22:47.510 に答える
0

これは、HTML のテーブルを使用して簡単に実行できます。または、テーブル セルのない div を使用したい場合はfloat: left、3 つの div を隣り合わせにする必要があります。そしてセットごとにラインブレイクを入れる。これは、それらすべてが同じ行に入るのを避けるためです。

于 2013-03-21T02:09:40.877 に答える