2 列的 CSS 布局问题


CSS layout issue with 2 columns

我面临着页面样式的布局问题,无法获得任何线索。

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

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

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

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

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

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

我的获取用户详细信息是

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

我没有得到这个布局问题的任何线索,有人可以指出这个问题是这里的问题吗?

这是因为您已经display: none给了孩子div。即通过在#content_tabActivities#content_tabFollowers的子div中添加"隐藏"类。

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

溶液:

#content_tabActivities#content_tabFollowers"隐藏"类

包裹#content_tabUploads#content_tabActivities#content_tabFollowers 变成一个div,给他们width: 690px;float:left

相关文章: