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%。有沒有人有這個問題的解決方案/知道解決它的另一種方法?
你有鏈接的例子嗎?我有一種預感,那些被加載的圖片沒有響應。 – runningRhetoric
圖像從本地文件夾加載。所以我把它們放在我的電腦上 –