使用ajax加载时div不调整高度答案

【问题标题】：div not adjusting height when loading with ajax使用ajax加载时div不调整高度
【发布时间】：2012-12-02 17:24:09
【问题描述】：

所以...

我想创建一个完全响应的网站，我们在其中推荐最好的移动应用。我在 json 字符串中有应用程序，并使用 $.ajax 方法通过 jquery 将其加载到内容 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%。有没有人有这个问题的解决方案/知道另一种解决方法？

【问题讨论】：

您有示例链接吗？我有一种预感，加载的图像没有响应。
图像是从本地文件夹加载的。所以我把它们放在我的电脑上..

标签： jquery height responsive-design

【解决方案1】：

您能提供更多信息吗？你如何扩展你的内容？会不会是因为注入的内容是在最初加载 DOM 之后生成的？

【讨论】：