1

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.

1 Resposta 1

4

O problema ocorre pois o navegador está alinhando as DIV's inline-block pela linha de base do texto contido nelas.

Há duas soluções que eu consigo pensar agora:

  • adicionar vertical-align: bottom; na classe blocoexp

    Isso faz com que o navegador alinhe as DIV's verticalmente usando a parte inferior do elemento (bottom) e não a linha de base do texto.

    .blocoexp {
      display: inline-block;
      width: 100px;
      height: 300px;
      border: 1px solid black;
      vertical-align: bottom;
    }
    .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>

  • adicionar overflow: hidden; na classe blocoexp

    Isso faz com que o navegador veja o elemento como uma janela, na qual os sub-elementos estão do outro lado da mesma... cortando os elementos que extravasam os limites do elemento pai, e também criando uma espécie de isolamento entre o que há fora e dentro do elemento.

    .blocoexp {
      display: inline-block;
      width: 100px;
      height: 300px;
      border: 1px solid black;
      overflow: hidden;
    }
    .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>

Explicação do vertical-align

Imagine os elementos PAI e FILHO. Para cada elemento, o navegador possui várias linhas para fazer alinhamento vertical:

  • linhas de base e de topo do texto
  • linhas inferior, média e superior do elemento
  • linhas de texto subscrito e sobrescrito

Quando você indica um vertical-align no FILHO, o navegador vai alinhar uma das linhas do FILHO com uma das linhas do PAI, seguindo uma regra para cada valor de vertical-align (CSS é assim, você tem que decorar várias regras):

  • baseline => alinha a linha de base do filho com a do pai
  • bottom => alinha a linha inferior do elemento filho com a do pai
  • middle => alinha a linha média do elemento filho com a do pai
  • top => alinha a linha superior do elemento filho com a do pai
  • sub => alinha a linha de base do filho com a linha de texto subscrito do pai
  • super => alinha a linha de base do filho com a linha de texto sobrescrito do pai
  • text-bottom => alinha a linha inferior do elemento filho com a linha inferior do texto do pai (no meu teste, é a linha de texto subscrito do pai, mas acho que na verdade equivale à linha que passa pelo limite inferior de letras como 'j', 'p', 'q' e 'g')
  • text-top => alinha a linha superior do elemento filho com a linha de topo do texto do pai

    • NOTA: no Chrome, observei que a linha de base de um elemento sem texto, é igual a linha inferior do elemento, o que afeta as regras baseline, sub e super.

Visualização das regras aplicadas lado a lado

Guias de alinhamento

.filho {
  display: inline-block;
  min-width: 10px;
  height: 100px;
  border: 1px solid black;
  font-size: 12px;
  margin: 0;
}
#pai {
  font-size: 48px;
  white-space: nowrap;
}
<div id="pai">
  I
  <div class="filho" style="vertical-align: bottom;">
    bottom
  </div>
  <div class="filho" style="vertical-align: bottom;"></div>
  I
  <div class="filho" style="vertical-align: middle;">
    middle
  </div>
  <div class="filho" style="vertical-align: middle;"></div>
  I
  <div class="filho" style="vertical-align: top;">
    top
  </div>
  <div class="filho" style="vertical-align: top;"></div>
  I
  <div class="filho" style="vertical-align: baseline;">
    baseline
  </div>
  <div class="filho" style="vertical-align: baseline;"></div>
  I
  <div class="filho" style="vertical-align: text-bottom;">
    text-bottom
  </div>
  <div class="filho" style="vertical-align: text-bottom;"></div>
  I
  <div class="filho" style="vertical-align: text-top;">
    text-top
  </div>
  <div class="filho" style="vertical-align: text-top;"></div>
  I
  <div class="filho" style="vertical-align: sub;">
    sub
  </div>
  <div class="filho" style="vertical-align: sub;"></div>
  I
  <div class="filho" style="vertical-align: super;">
    super
  </div>
  <div class="filho" style="vertical-align: super;"></div>
  I
</div>

10
  • Apesar da sua resposta ter resolvido meu problema, eu não entendi a lógica da coisa de fato. Navegador lendo na base do texto?
    – ropbla9
    Commented 5/11/2014 às 4:10
  • Coloquei uma explicação melhorada sobre o vertical-align. Me diz sua opinião... se ficou fácil de entender agora, ou se ainda pode ser melhorado. Commented 5/11/2014 às 11:14
  • Ando meio sem tempo, tô lendo sua resposta aos pedaços e tô conseguindo entender. O que tá me parecendo até agora que é essa propriedade é a mais complicada de todo o CSS.
    – ropbla9
    Commented 7/11/2014 às 8:12
  • por que é que o inline-block vazio tambem n se alinhou na baseline? Aliás, eu acho que se alinhou né? Mas as diz que continham texto respeitaram a partir do texto. Mas porque não a apartir do inline-block ja q ele se comprota como texto?
    – ropbla9
    Commented 7/11/2014 às 17:00
  • Eu ainda to com muita dificuldade mano. Tem como você me aceitar no face?
    – ropbla9
    Commented 7/11/2014 às 19:10

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 .