我一直在互联网和其他 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;
}
最佳答案
您可以使用 flex 并将 margin-top:auto
设置为类别,以便将它们向下推。尝试添加此代码:
.container-div-curso {
display:flex;
flex-direction:column;
}
.container-div-curso .container-categoria-curso {
margin-top:auto;
}
关于javascript - 固定页脚在动态相同大小的 div/列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47600109/