0

我正面临页面样式的布局问题，并且无法获得任何线索。

页面位于 http://testenv.pagalhost.com/gobuzzinga/profile.php?profile=Abhishek+Srivastava-2

问题是当我们在底部加载此页面时，有 2 个部分，一个显示用户上传的图像，另一个显示其关注者列表，但即使 CSS 中的宽度和浮动元素正确，它们也没有正确对齐。

同样，当我们将选项卡更改为活动时，它与左侧的 div 对齐。

最好的部分是当我回到第一个选项卡时，上传其正确对齐。

<script>
fetchUserDetails('getProfile');
fetchUserDetails('getAlbum');
fetchUserDetails('getActivityCount');
fetchUserDetails('getFollowers');
</script>

这是在页面加载时调用函数并获取数据的地方。

我的 fetchuserDetails 是

function fetchUserDetails(type)
  {
    $.ajax({
      type: "POST",
      url: "processes/userAction.php",
      cache: true,
      dataType: 'json',
      data: 'action='+type+'&userInfo=<?php echo (isset($_REQUEST['profile']))?$_REQUEST['profile']:"current"; ?>&page='+1,
      success: function(html){
        if(type=='getProfile')
          displayProfile(html)
        else if(type=='getFollowers')
          displayFollowers(html)
        else if(type=='getFollowing')
          displayFollowing(html)
        else if(type=='getAlbum')
          displayAlbum(html)
        else if(type=='getActivityCount')
          displayActivityCount(html)
      }
    });              
  }

我的显示追随者功能是：

function displayFollowers(data)
  {
    htmlData = '';
    var count = 1;
    $.each(data, function(index, val) {
     htmlData += '<div>Following/Followers</div><div class="twitter-wrapper"><div class="twitter-widget"><div class="user-info">';
     htmlData += '<img src="'+val.pic+'" alt="avatar" style="height:50px;widht:auto;" />';
     htmlData += '<p>'+val.name+'</p>';
     htmlData += '<span>'+val.current_location+'</span>';
     htmlData += '</div>';
     htmlData += '<div class="stats">';
     htmlData += '<p><span>2,3k</span>posts</p>';
     htmlData += '<p><span>326</span>following</p>';
     htmlData += '<p><span>752</span>followers</p>';
     htmlData += '</div>';
     htmlData += '<span>'+count+'</span>';
     htmlData += '<div class="corner"></div></div>';
     htmlData += '<div class="compose-card">';
     htmlData += "<div class='userFollow' id='follow"+data.u_id+"'><a href='javascript:void(0);' class='follow follow_no' id='"+data.u_id+"'>Follow</a></div>";
     htmlData += "<div class='userFollow' id='remove"+data.u_id+"' style='display:none'><a href='#' class='remove follow_yes' id='"+data.u_id+"'>Following</a></div>";
     htmlData += '</div></div>';
     count++;
   });

    $('#followersList').append(htmlData);

    bindFollowFunctions();
  }

并显示相册功能是：

function displayAlbum(data)
  {
    var htmlData = '';
    $.each(data, function(index, val) {
     htmlData += '<a href="'+val.pic+'" ><img src="'+val.pic+'" /></a>';
    });

    $('.albumSet').html('');
    $('.albumSet').append(htmlData);
    $(function() {
      $(".albumSet img").unveil(300);
    });

    $('.albumSet').each(function() { 
      $(this).magnificPopup({
        delegate: 'a', 
        type: 'image',
        gallery:{enabled:true},
        removalDelay: 300,
        mainClass: 'mfp-fade'
      });
    }); 
  }

我对这个布局问题没有任何线索，有人可以指出这个问题是什么问题。

4

1 回答 1

0

那是因为你给display: none了孩子div。那是通过将“隐藏”类添加到divand #content_tabActivities的子级#content_tabFollowers。

当页面加载#content_tabActivities且未#content_tabFollowers隐藏时。但是当你点击选项卡时，display: none会添加到这些 div 中。

解决方案 ：

给 #content_tabActivities和“隐藏”类#content_tabFollowers

或者

#content_tabUploads将,#content_tabActivities和包装#content_tabFollowers 成 adiv并给它们width: 690px;和float:left

于 2013-10-09T15:42:57.180 回答