3

Tenho o seguinte trecho de código:

    .content-all{
        height: 100%;
        width: 100%;

        background-color: yellow;
    }

    .content-descriptions{
        height:120px;
        width: 1020px;  
      
        background-color: green;
    }

    .content-descriptions-left {
        display: inline-block;
        width: 500px;
        margin: 20px;
        height: 80px;

        font-size: 14px;

        background-color:red;
    }

    .content-descriptions-right {
        display: inline-block;
        width: 400px;
        margin: 20px;
        height: 80px;

        font-size: 14px;

        background-color: blue;
    }
<div class="content-all">

    <div class="content-descriptions">

        <div class="content-descriptions-left">
            BR huehue...
            <br/>
            <br/>
        </div>

        <div class="content-descriptions-right">
            Comossomo:<br/>
            <input type="radio" value="0" name="opcoes" /> X<br/>
            <input type="radio" value="0" name="opcoes" /> Y
        </div>

    </div>

</div>

Por que as divs não ficam alinhadas?

Resultado obtido:

inserir a descrição da imagem aqui

Resultado desejado:

inserir a descrição da imagem aqui

Perceba que a div vermelha está abaixo da div azul, mas eu gostaria que elas ficassem da mesma altura, usando de preferencia a div azul como referencia.

7
  • perceba que a div vermelha está abaixo da div azul, mas eu gostaria que elas ficassem da mesma altura, usando de preferencia a div azul como referencia. Commented 7/04/2016 às 17:47
  • @GuilhermeNascimento acho que é isso. Provavelmente o melhor seja usar padding no elemento de cima.
    – Largato
    Commented 7/04/2016 às 17:59
  • editei a pergunta pra ficar mais clara, mas as respostas já resolvem direitinho.. Commented 7/04/2016 às 18:04
  • @GuilhermeNascimento na verdade nem seria baseline, seria bottom provavelmente. mas o padding é melhor.
    – Largato
    Commented 7/04/2016 às 18:09
  • 1
    Realmente, por isso falei do padding. Aí você trata tudo como block, e não desalinha. Tratar bloco como texto sempre tem efeito colateral.
    – Largato
    Commented 7/04/2016 às 18:25

2 Respostas 2

5

Existem elementos block e inline, ao usar display: inline-block você cria umm block que fica em uma linha, portanto efeitos de "texto" como espaçamentos e alinhamentos irão afetar os divs.

Sendo "inline" você pode aplicar o vertical-align assim:

.content-all{
    height: 100%;
    width: 100%;

    background-color: yellow;
}

.content-descriptions{
    height:120px;
    width: 1020px;  
    background-color: green;
}

.content-descriptions-left {
    display: inline-block;
    width: 500px;
    margin: 20px;
    height: 80px;
    font-size: 14px;
    background-color:red;
  vertical-align: top;
}

.content-descriptions-right {
    display: inline-block;
    width: 400px;
    margin: 20px;
    height: 80px;
    font-size: 14px;

    background-color: blue;
}
<div class="content-all">
    <div class="content-descriptions">
        <div class="content-descriptions-left">
            BR huehue...
            <br/>
            <br/>
        </div>

        <div class="content-descriptions-right">
            Comossomo:<br/>
            <input type="radio" value="0" name="opcoes" /> X<br/>
            <input type="radio" value="0" name="opcoes" /> Y
        </div>
    </div>
</div>

Notei que você usou a altura fixa height: 80px;, mas se necessitar fazer alturas iguais e que aumentem conforme o conteúdo eu recomendo esta leitura:

O display: inline-block pode dar alguma dor de cabeça, pois como eu citei ele é afetado pelas propriedades de texto, você pode usar sim ele pra criar colunas, mas se houver qualquer propriedade de CSS pra texto como text-align as colunas serão afetadas, neste caso você pode usar o float e o clear: both (principalmente se quiser que o elemento pai aumente a altura conforme os elementos filhos), por exemplo:

é necessário o pseudo :after no elemento "pai" pra aplicar o clear: both, pois os elementos float afetam o elemento "pai" por estarem "flutuando" (não confundir com position: absolute) e assim o pai não detecta mais a altura

.content-all{
    height: 100%;
    width: 100%;
    background-color: yellow;
}

.content-descriptions {
    width: 1020px;
    background-color: green;
}
.content-descriptions:after {
    content: "";
    overflow: hidden;
    clear: both;
    height: 0;
    display: block;
}

.content-descriptions-left, .content-descriptions-right {
    margin: 20px;
    height: 80px;
    font-size: 14px;
}

.content-descriptions-left {
    float: left;
    width: 500px;
    background-color:red;
}

.content-descriptions-right {
    float: right;
    width: 400px;
    background-color: blue;
}
<div class="content-all">
    <div class="content-descriptions">
        <div class="content-descriptions-left">
            BR huehue...
            <br/>
            <br/>
        </div>

        <div class="content-descriptions-right">
            Comossomo:<br/>
            <input type="radio" value="0" name="opcoes" /> X<br/>
            <input type="radio" value="0" name="opcoes" /> Y
        </div>
    </div>
</div>

O float mantem os elementos como block e diferente do inline-block as propriedades CSS pra texto (como text-align) não irão afeta-los. O float funciona justamente pra flutuar (não confundir com position: absolute), é como se ele procurasse espaços e tenta se mover se baseando no elemento pai e irmãos. Ou seja float: left ele vai tentar se mover pra esquerda até não encontrar mais "espaço". No momento que move com float isso afeta os "irmãos próximos" "arrastando" eles junto.

Quando no exemplo movi um elemento pra left com float e outro pra right é como se eles ficassem flutuantes e param de deixar de ter a quebra em quanto houver espaço, se a largura do pai for menor que os elementos flutuantes esses elementos irão quebrar.

Pode usar o display: inline-block, mas se sentir dificuldades com propriedades de texto CSS que afetam então talvez possa experimentar o float.

3
  • Muito bem explicado e funcionando perfeitamente! Muito obrigado pela resposta. Commented 7/04/2016 às 18:24
  • 1
    @JedaiasRodrigues editei a resposta agora =)
    – Syzoth
    Commented 7/04/2016 às 18:25
  • 1
    Boa!! One Like!=) Commented 7/04/2016 às 18:26
2
  .content-all{
        height: 100%;
        width: 100%;

        background-color: yellow;
    }

    .content-descriptions{
        height:120px;
        width: 1020px;  

        background-color: green;
    }

    .content-descriptions-left {
        float:left;
        width: 500px;
        margin: 20px;
        height: 80px;

        font-size: 14px;

        background-color:red;
    }

    .content-descriptions-right {
            float:left;
        width: 400px;
        margin: 20px;
        height: 80px;

        font-size: 14px;

        background-color: blue;
    }

Use o float:left para alinhar os dois.

6
  • 1
    Muito obrigado pela resposta @Jose-Francisco funcionou perfeitamente, mas você poderia falar um pouquinho mais sobre o motivo de não ter funcionado antes e porque usando floag:left passou a funcionar? Commented 7/04/2016 às 18:03
  • 1
    Perfeito Guilherme, grato pela explicação. Commented 7/04/2016 às 18:09
  • 1
    @JedaiasRodrigues float mantem os elementos como block e diferente do inline-block propriedades css pra texto não irão afeta-los. O float funciona justamente pra flutuar (não confundir com position), é como se ele procurasse espaços e tenta se mover se baseando no elemento pai e irmãos. Ou seja float: left ele vai tentar se mover pra esquerda até não encontrar mais "espaço". No momento que move com float isso afeta os "irmãos proximos" e trás ela junto com o div especifico...
    – Syzoth
    Commented 7/04/2016 às 18:10
  • 1
    @JedaiasRodrigues ... quando moveu um pra left e outro pra right é como se eles ficassem flutuantes e param de deixar de ter a quebra em quanto houver espaço.
    – Syzoth
    Commented 7/04/2016 às 18:10
  • @GuilhermeNascimento espetacular explicação! Muito obrigado. Commented 7/04/2016 às 18:18

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 .