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

时间:2017-12-01 19:18:43

标签: javascript html css twitter-bootstrap

我正在寻找互联网和其他SO问题的答案,但他们都没有帮助我...

主要想法:
我将在体内有动态的div(内容将来自DB),可以是3 div,可以是10 div,可以是32 div ...那些div是一种拇指,里面的内容将是也是动态的,一个div可以有4行内容而另一个可以有8个,但是ALL需要具有相同的高度。现在它显示如下:EXAMPLE

我需要什么
正如您在上图中所看到的,有"分类1"和"分类2",这些必须始终在底部,并不重要上面内容有多少行,对图像进行一些编辑,你可以在这里看到我需要的东西:{ {3}}

我尝试了很多东西,比如绝对和相对的位置,显示,底部: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的图像: EXAMPLE2

1 个答案:

答案 0 :(得分:1)

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

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