2012-12-14 54 views
2

因此...div加載ajax時未調整高度

我想創建一個完全響應的網站,我們在其中推薦最佳的移動應用程序。我有一個json字符串的應用程序,並通過jQuery使用$ .ajax方法將其加載到內容div(實際上是一個使用HTML5的部分)。

<section id="content-wrapper" class="colums cols-12"> 
    <section id="content" class="gratisapps centered clearfix cols-12"> 
    </section> 
</section> 

爲了使這個網站響應(第960像素寬度固定,對於較小的屏幕我想用一個流體佈局),我已經使用了12-科拉姆網格。頁眉和頁腳與瀏覽器寬度一起縮放,但內容不變。我相信這與我的內容容器沒有高度的事實有關,儘管所有的應用程序都加載了它。

var _gratisApps; 
function inladenApplicaties(){ 
$.ajax({ 
    type:"GET", 
    dataType:"JSON", 
    contenttype: "application/json", 
    cache:false, 
    url: "../_data/gratisapps.json", 
    success:function(data){ 
     if(data != null && data.apps != null){ 
      //GET PORTFOLIOITEMS FROM JSON STRING 
      _nieuweApps = data.apps; 
      //VISUALIZE PORTFOLIOITEMS 
      vizuGratisApplicaties(); 
     } 
    }, 
    error:function(xhr, result, error){ 
     alert(result + " " + error); 
    } 
}); 
} 
function vizuGratisApplicaties(){ 
var content = ""; 
$.each(_nieuweApps, function(key, nieuweApp){ 
    if(nieuweApp.soort == "nieuw") 
    { var queryString = nieuweApp.title.replace(/\s+/g, '%20'); 
     content += '<section class="app colums cols-2 clearfix">' 
     + '<a href="detailpage.html?q=' + queryString + '">' 
     + '<figure><img class="app-image" src="' + nieuweApp.image + '" /></figure>' 
     + '<figcaption><h4>' + nieuweApp.title + '</h4></figcaption>' 
     + '</a>' 
     + '</section>'; 
    } 
}); 
$('#content.gratisapps').append(content); 
} 

所有這些部分都左移,寬度爲14.58333%。有沒有人有這個問題的解決方案/知道解決它的另一種方法?

+0

你有鏈接的例子嗎?我有一種預感,那些被加載的圖片沒有響應。 – runningRhetoric

+0

圖像從本地文件夾加載。所以我把它們放在我的電腦上 –

回答

0

您能否提供更多信息;你如何擴展你的內容? 難道是因爲注入的內容是在最初加載DOM之後生成的?