javascript - 固定页脚在动态相同大小的 div/列中

Question

我一直在互联网和其他 SO 问题中寻找答案，但没有一个对我有帮助...

主要想法:
我将在主体内设置动态的 div(内容将来自数据库)，可以是 3 个 div，可以是 10 个 div，可以是 32 个 div ...这些 div 是一种缩略图，里面的内容将也可以是动态的，一个 div 可以有 4 行内容，另一个可以有 8 行，但所有内容都需要具有相同的高度。现在它是这样显示的:

我需要什么
正如你在上图中看到的，有“Categoria 1”和“Categoria 2”，这些需要始终在底部，不管上面的内容有多少行，对图像进行一些编辑，你可以在这里看到我需要的东西:

我尝试了很多东西，比如绝对位置和相对位置、显示、底部:0px...都没有用...这是我的实际代码(记住内容是动态的)，请看看并尝试帮助我:

HTML/JS:

<div id="container-cursos" class="center-block container-geral-cursos">
</div>

<scrip>
                    var cursos = func.Cursos;
                    var containerCursos = $("#container-cursos");

                    for (var i = 0; i < cursos.length; i++) {
                        var curso = cursos[i];       
                        var containerCursoUnico = document.createElement("div");
                        containerCursoUnico.addClass("web-col-responsive container-div-curso");
                        containerCursos.append(containerCursoUnico);

                        var divteste = document.createElement("div");

                        var imgCurso = document.createElement("img");
                        imgCurso.addClass("img-curso-thumbnail img-responsive");
                        imgCurso.onclick = this.ClickCursoCommand.bind(this, curso);
                        imgCurso.src = shell.Host + "/content/" + curso.Imagem;

                        divteste.append(imgCurso);

                        var btnDescCurso = document.createElement("span");
                        btnDescCurso.onclick = this.ClickCursoCommand.bind(this, curso);
                        btnDescCurso.addClass("curso-titulo");
                        btnDescCurso.innerHTML = curso.Descricao;
                        divteste.append(btnDescCurso);

                        var divmodulos = document.createElement("div");
                        divModulos.addClass("NADA");
                        divModulos.style.display = "inline-block";
                        divteste.append(divModulos);


                        for (var y = 0; y < curso.Modulos.length; y++) {
                            var modulo = curso.Modulos[y];

                            var btnDescricaoModulo = document.createElement("span");
                            btnDescricaoModulo.addClass("col-xs-12 curso-modulo-descricao");
                            btnDescricaoModulo.onclick = this.ClickModuloCommand.bind(this, curso, modulo);
                            btnDescricaoModulo.innerHTML = modulo.Titulo;
                            divModulos.append(btnDescricaoModulo);
                       }
                        containerCursoUnico.append(divteste);
                        var containerCategoriaCurso = document.createElement("div");
                        containerCategoriaCurso.addClass("container-categoria-curso");                    

                        for (var j = 1; j < 3; j++) {
                            var categoriaCurso = document.createElement("span");
                            categoriaCurso.addClass("span-categoria-curso");
                            categoriaCurso.innerHTML = " Categoria " + j; 
                            containerCategoriaCurso.append(categoriaCurso);
                        }
                        containerCursoUnico.append(containerCategoriaCurso);
</script>

CSS:

.web-col-responsive {
    width: 20%;
}

    .curso-titulo {
        font-size: 20px;
        font-weight: bold;
        padding: 5px;
        background-color: #006063;
        border-bottom: 2px solid #006063;
        border-top: 2px solid #006063;
        color: white;
        display: block;
        width: 100%;
    }

    .curso-modulo-descricao {
        font-size: 13px;
        color: black;
        padding: 5px;
        font-weight: bold;
        margin-bottom: 0px;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;    
    }

    .container-geral-cursos {
        width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }

    .img-curso-thumbnail {
        height: 140px;
        width: 100%;
    }

    .container-categoria-curso {
        width: 100%;
        text-align: left;
    }

    .span-categoria-curso {
        font-size: 11px;
        padding: 4px;
        color: #404040;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
    }

    .container-div-curso {
        margin: 10px;
        border: 1px solid #006063;
        border-radius: 3px;
        box-shadow: 4px 4px 6px #8f8f8f;
        padding: 0;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
    }

为了更容易阅读代码，这里是生成的 HTML 的图像:

Answer 1

您可以使用 flex 并将 margin-top:auto 设置为类别，以便将它们向下推。尝试添加此代码:

.container-div-curso {
 display:flex;
 flex-direction:column;
}
.container-div-curso .container-categoria-curso {
  margin-top:auto;
}