Tenho 3 elementos inline-block
. São 3 quadrados alinhados, resumindo.
Então quando coloco um div
"filha" em um deles, ele cai e os outros vazios se mantem na posição. Acontece o mesmo com todos.
Mas se eu coloco uma div
filha dentro(preencha) de TODOS, eles se mantem na posição correta. Do contrário, eles caem.
Vejam com as 3 divs contendo <figure>
e <p>
, tudo se alinha.
.blocoexp{
display:inline-block;
width:100px;
height:300px;
border:1px solid black;
}
.blocoexp figure{
width:30%;
height:80px;
border:1px solid black;
}
.blocoexp p{
width:30%;
height:80px;
border:1px solid black;
word-break:break-all;
}
<div class="blocoexp">
<figure></figure>
<p>asdasdasd</p>
</div>
<div class="blocoexp">
<figure></figure>
<p>asdasdasd</p>
</div>
<div class="blocoexp">
<figure></figure>
<p>asdasdasd</p>
</div>
Agora vejam se eu retirar o conteudo de uma das divs.
.blocoexp{
display:inline-block;
width:100px;
height:300px;
border:1px solid black;
}
.blocoexp figure{
width:30%;
height:80px;
border:1px solid black;
}
.blocoexp p{
width:30%;
height:80px;
border:1px solid black;
word-break:break-all;
}
<div id="blocoexpai">
<div class="blocoexp">
<figure></figure>
<p>asdasdasd</p>
</div>
<div class="blocoexp">
<figure></figure>
<p>asdasdasd</p>
</div>
<div class="blocoexp">
</div>
</div>
Tcharam! Só fica a vazia, as outras caem.