所以...
我想创建一个完全响应式的网站,我们在其中推荐最好的移动应用程序。我将应用程序放在 json 字符串中,并使用 $.ajax 方法通过 jquery 将其加载到内容 div(实际上是一个部分,使用 HTML5)中。
<section id="content-wrapper" class="colums cols-12">
<section id="content" class="gratisapps centered clearfix cols-12">
</section>
</section>
为了使该网站具有响应能力(第一个 960px 固定宽度,对于较小的屏幕,我想使用流体布局),我使用了 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%。有谁有这个问题的解决方案/知道另一种解决方法吗?
最佳答案
您能提供更多信息吗?您如何扩展您的内容? 难道是因为注入(inject)的内容是在最初加载DOM之后生成的?
关于jquery - 使用ajax加载时div不调整高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13883263/