0

InstagramのAPIと一連のDIVを使用してアプリケーションを作成しています

ラッパー、画像コンテナ、画像、ポップアップ（ホバー）ユーザープロファイル画像ユーザー名日付画像が撮影されました

プロフィール画像、ユーザー名、画像をすべて1行に表示したいと思っています。

これがjsFiddleです：http：//jsfiddle.net/nAfxc/1/

4

1 に答える 1

1

クラスの幅を指定する必要があります.instagram。

ここでjsFiddleを参照してください。この場合、例として10,000pxを挙げます。実際の数を計算することをお勧めします。このようなものかもしれません：

function SetWidth() {

  var WidthOfSinglePic = $('.instagram-feed').width();
  var NumberOfPicsInFeed = $('.instagram').find('.instagram-feed').length;
  var WidthOfParentDiv = parseInt(WidthOfSinglePic  * NumberOfPicsInFeed, 10);

  $('.instagram').width(WidthOfParentDiv);
}

<br>編集：タグを削除するには、これでうまくいきます：

$('.igHoverContent').each(function () {

  var ContentHTML = $(this).html();

  var CleanContent = ContentHTML.find('br').each(function() {
      $(this).remove();
  }); 

  $(this).html(CleanContent);

});

明確化した後、編集します。

$('.igHoverContent').each(function () {

   var ThumbnaiTopPosition = $(this).parent().find('igHover2').position().top;
   var ThumbnaiLeftPosition = $(this).parent().find('igHover2').position().left;
   var ThumbnailWidth = $(this).parent().find('img').width();

   var NewLeftPostion = ThumbnaiLeftPosition + ThumbnailWidth;

   $(this).css({
      'top': ThumbnaiTopPosition,
      'left': NewLeftPostion  
   });
});

注：「プロフィール画像、ユーザー名、画像をすべて1行に表示したい」と言った場合。、あなたが本当に「各クラスをクラスの隣に配置したい」という意味だと誰が推測するのでしょうか。.igHover.igHoverProfPic

最終編集：生成しているHTMLに何か非常に問題があることがわかりました!!! これの終了タグを削除する必要があります。<div class='igHoverContent' />\これにより、データはタグから外れるのではなく、タグに囲まれます!!!; 次に、CSSを次のように変更します。

.igHoverContent {
position: absolute;
margin: 275px 0px 0px 63px;}

ここで最終出力を参照してください：http：//jsfiddle.net/nAfxc/6/

于 2012-09-27T19:10:07.903 に答える