Skip to main content
adicionou 2945 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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.

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.

Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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: