1

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

3 Respostas 3

0

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>
0

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">&nbsp;</div>
  <div class="coluna coluna_2">&nbsp;</div>
  <div class="coluna coluna_3">&nbsp;</div>
  <div class="coluna coluna_4">&nbsp;</div>
  <div class="coluna coluna_5">&nbsp;</div>
  <div class="coluna coluna_6">&nbsp;</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

0

Basicamente é simples, use o conceito de even e odd nas colunas da esquerda float:left e nas da direita float:right.

2
  • Então, mas terá 6 divs na horizontal, ela se adaptam ao tamanho de seu conteudo e quando chega a 6 divs, começa tudo de novo na linha de baixo, mas só que as divs precisam ir se encaixando nos espaços, pois na linha superior as divs possuem tamanhos diferentes, como eu posso fazer ? Teria algum código para eu estudar ?
    – abduzeedo
    Commented 27/08/2016 às 0:07
  • tente fazer em 6 colunas seria o mais simples vou pesquisar na net se eu achar algo ponho o ex aqui. Commented 27/08/2016 às 0:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .