5

Escrevo algo em uma das <div> e ela muda de posição. Porque?

Aqui isso acontecendo: http://codepen.io/anon/pen/JHIjB

HTML:

<div class = "wrap1">
   <div>algo</div>
   <div></div>
   <div></div>
   <div></div>
</div>

CSS:

*{
  box-sizing: border-box;
}
body,html{
   height:100%;
   margin:0;
   padding:0;
}
.wrap1{
   min-height:100%; 
   background: #e1e1e1;
}
.wrap1 div{
   min-width: 45%;
   height:300px;
   min-height:50%;
   margin: 10px;
   display:inline-block;
   padding: 10px;
   border: 1px solid black;
   background: #b0bec5;
   position:relative;
}
2
  • o porquê eu não sei, já que não mecho com CSS, mas adicionando ao texto uma position:absolute curiosamente funcionou aqui, olha esse patch que fiz: codepen.io/anon/pen/AmaDd
    – Olimon F.
    Commented 30/06/2014 às 5:31
  • Por favor, coloque seu código aqui. Se o codepen desaparece a pergunta não fará sentido.
    – brasofilo
    Commented 30/06/2014 às 7:34

1 Resposta 1

3

Bom agora que entendi sua pergunta vou te explicar:

Primeiro isso acontece por causa do inline-block, ele se comporta conforme o conteúdo da página. Tente adicionar conteúdos fora da DIV e você entenderá isso. Exemplo abaixo:

display:inline-block;

<div class = "wrap1">
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
</div> 

Segundo inline-block é diferente do block, o block se comporta colocando-se um acima do outro. O inline-block é bem especifico para isso, ajustar-se conforme todo o conteúdo dá página, se não, na mesma linha.

Na prática usamos o valor inline-block quando queremos definir um valor para a propriedade width. Sob certas circunstâncias, alguns navegadores ignoram a propriedade width para elementos inline, então definindo display: inline-block para tais elementos você forçará o navegador a reconhecer o valor definido para a propriedade width.

8
  • 1
    A pergunta é porque acontece isso e não a forma de solucionar.
    – Jorge B.
    Commented 30/06/2014 às 12:25
  • Entendeu @JorgeB.? Commented 30/06/2014 às 14:28
  • 1
    +1 pela edição para a nova resposta.
    – Jorge B.
    Commented 30/06/2014 às 15:40
  • +1 pelo +1 :P!! Commented 30/06/2014 às 15:42
  • 2
    Quem fez a pergunta foi o Mario, não o @JorgeB. Só o Mario pode marcar a resposta como aceita. Ele pode estar esperando para ver se aparecem outras respostas, ou talvez não saiba como marcar a resposta como aceita. Mario: se estiver lendo isto, veja meta.pt.stackoverflow.com/questions/1078/…
    – bfavaretto
    Commented 1/07/2014 às 3:37

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 .