我正在寻找互联网和其他SO问题的答案,但他们都没有帮助我...
主要想法:
我将在体内有动态的div(内容将来自DB),可以是3 div,可以是10 div,可以是32 div ...那些div是一种拇指,里面的内容将是也是动态的,一个div可以有4行内容而另一个可以有8个,但是ALL需要具有相同的高度。现在它显示如下:
我需要什么
正如您在上图中所看到的,有"分类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;
}
答案 0 :(得分:1)
您可以使用flex并将margin-top:auto
设置为类别,以便按下它们。尝试添加此代码:
.container-div-curso {
display:flex;
flex-direction:column;
}
.container-div-curso .container-categoria-curso {
margin-top:auto;
}