Question

我正在使用Instagram的API和一系列DIV创建应用程序

包装，图像容器，图片， PopUp（悬停）用户个人资料图片用户名拍摄日期图像

我希望将个人资料图片，用户名和图片全部显示在一行上。

这是一个jsFiddle：http://jsfiddle.net/nAfxc/1/

Answer 1

您需要为.instagram类指定宽度。

请参阅jsFiddle here。在这种情况下，我只以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  
   });
});

注意：当你说“我希望将个人资料图片，用户名和图像全部显示在一行上。”，怎么会有人猜测你的意思是 >“我想将每个班级.igHover放在班级.igHoverProfPic旁边”？

最终编辑：我刚刚发现你正在生成的HTML出现了一些问题！你应该删除这个结束标记：<div class='igHoverContent' />\以便数据被封装在标签中，而不是在标签之外！然后只需将CSS更改为：

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

请在此处查看最终结果：http://jsfiddle.net/nAfxc/6/

2个动态加载的div并排

1 个答案: