Question

我面临布局问题，因为页面的样式并没有得到任何线索。

Page at at http://testenv.pagalhost.com/gobuzzinga/profile.php?profile=Abhishek+Srivastava-2

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

当我们将标签更改为活动时，它再次与左边的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'
      });
    }); 
  }

我没有得到任何关于这个布局问题的线索，有人可以指出问题是这里有什么问题。

Answer 1

这是因为您已将display: none提供给孩子div。这是通过向div和#content_tabActivities的子#content_tabFollowers添加“隐藏”类。

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

解决方案：

将“隐藏”类提供给#content_tabActivities和#content_tabFollowers

或

换行#content_tabUploads，#content_tabActivities和#content_tabFollowers 进入div并提供width: 690px;和float:left

2列的CSS布局问题

1 个答案: