css - 2个动态加载的div并排

Question

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

Wrapper、Image Container、Image、PopUp（悬停）用户个人资料图像用户名日期图像拍摄

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

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

Answer 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  
   });
});

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

最终编辑：我刚刚发现您生成的 HTML 有问题！！！您应该删除 this: 的结束标签，<div class='igHoverContent' />\以便将数据包含在标签中而不是在标签之外！！！；然后只需将您的 CSS 更改为：

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

在此处查看最终输出：http: //jsfiddle.net/nAfxc/6/