2个动态加载的div并排

Question

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

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

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

这是一个 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/