带有2列的CSS布局问题

Question

我正面临版面设计的问题，一个页面的样式，并没有得到任何线索。

佩奇在http://testenv.pagalhost.com/gobuzzinga/profile.php?profile=Abhishek+Srivastava-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'
      });
    }); 
  }

我不知道这个布局问题，谁能指出问题的问题是什么，在这里。

Answer 1

这是因为你把display: none给了孩子div。这是通过将“隐藏”类添加到子div of #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