I have the following code:
<div id="box-1" class="box">
<div ng-repeat="task in contato " style="margin-top: 5px">
<div class="md-card md-card-hover">
<div class="md-card-content">
<div style="margin-top:-20px">
<span>Cliente: {{ task.razao}}</span><br />
<span>valor_negocio: {{ task.valor_negocio}}</span><br />
<span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
</div>
</div>
</div>
</div>
</div>
<div id="box-2" class="box">
<div ng-repeat="task in Andamento" style="margin-top: 5px">
<div class="md-card md-card-warning md-card-hover">
<div class="md-card-content">
<span>Cliente: {{ task.razao}}</span><br />
<span>valor_negocio: {{ task.valor_negocio}}</span><br />
<span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
</div>
</div>
</div>
</div>
<div id="box-3" class="box">
<div ng-repeat="task in fechado" style="margin-top: 5px">
<div class="md-card md-card-success md-card-hover">
<div class="md-card-content">
<span>Cliente: {{ task.razao}}</span><br />
<span>valor_negocio: {{ task.valor_negocio}}</span><br />
<span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
</div>
</div>
</div>
</div>
<div id="box-4" class="box">
<div ng-repeat="task in perdido" style="margin-top: 5px">
<div class="md-card md-card-danger md-card-hover">
<div class="md-card-content">
<span>Cliente: {{ task.razao}}</span><br />
<span>valor_negocio: {{ task.valor_negocio}}</span><br />
<span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
</div>
</div>
</div>
</div>
And in my controller you have the json array:
$scope.contato = [
{ "id": "1", "razao": "ADEMIR DA", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "4", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];
$scope.Andamento = [
{ "id": "1", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];
$scope.fechado = [
{ "id": "1", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];
$scope.perdido = [
{ "id": "1", "razao": "ADEMIA", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
{ "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];
How can I make empty spaces (when an array has more items than the others), stay at the bottom?
CSS
#container {
width: 100%;
border-color: blue;
text-align: left;
}
.box {
display: inline-block;
width: 24%;
height: 200px;
/*margin: 5px 5px;*/
}
.cabecalho {
display: inline-block;
width: 24%;
height: 20px;
/*margin: 5px 5px;*/
}
#box-1 {
background-color: white;
}
#box-2 {
background-color: white;
}
#box-3 {
background-color: white;
}