ページのスタイリングに関するレイアウトの問題に直面しており、その手がかりを得ることができません。
ページは http://testenv.pagalhost.com/gobuzzinga/profile.php?profile=Abhishek+Srivastava-2にあります。
問題は、このページを一番下に読み込むと、2 つのセクションがあり、1 つはユーザーがアップロードした画像を表示し、もう 1 つはそのフォロワー リストを表示しますが、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'
});
});
}
このレイアウトの問題の手がかりが得られません。誰かが問題を指摘してください。