Como eu posso fazer para que a div se ajuste e se alinhe a div superior de forma automática ? Pois essa div é inserida de forma dinâmica.
Gostaria de fazer isso.
Obrigado
Pode fazer assim, vê se ajuda. Qualquer coisa comenta que agente ajusta.
<body>
<div id="geral">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
<style>
body{
border:0;
margin:0;
padding:0;
background:#ffffff;
height:100%;
width:100%;}
#d1{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(30% - (4px));
float:left;}
#d2{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(40% - (4px));
float:right;
}
#d3{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(70% - (4px));
float:left;}
#d4{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(60% - (4px));
float:right;}
</style>
Procure usar medidas relativas com float: left; para ter uma noção do encaixe, por exemplo.
em uma Row 100% existem 6 div´s 50%;
elas receberam float: left logo se encaixam porem uma ficou com o float right para se ajustar as outras
segue o código
HTML
<div class="row row_container" >
<div class="coluna coluna_1"> </div>
<div class="coluna coluna_2"> </div>
<div class="coluna coluna_3"> </div>
<div class="coluna coluna_4"> </div>
<div class="coluna coluna_5"> </div>
<div class="coluna coluna_6"> </div>
</div>
CSS
/* Adaptação para o responsivo */
.row,
.coluna {
box-sizing: border-box;
}
.row:before,
.row:after {
content: " ";
display: "table";
}
.row:after {
clear: both;
}
.row_container {
float: left;
width: 100%;
border: 1px black solid;
}
.coluna {
border:1px black solid;
float: left;
}
.coluna_1 {
width: 50%;
height: 16vh;
}
.coluna_2 {
width: 50%;
height: 14vh;
}
.coluna_3 {
width: 50%;
height: 11vh;
float: right;
}
.coluna_4 {
width: 50%;
height: 15vh;
}
.coluna_5 {
width: 50%;
height: 13vh;
float: right;
}
.coluna_6 {
width: 50%;
height: 14vh;
}
código https://fiddle.jshell.net/pkvvwuo4/1/
porém o sistema de grids por porcentagem possui muitas complicações, por isso recomendo estudar as Flexbox do css
Basicamente é simples, use o conceito de even e odd nas colunas da esquerda float:left
e nas da direita float:right
.