Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Duvida no uso do Float e Clear

por Gleilson
| 161.3k xp | 56 posts

Alguém poderia dar uma força... Fiz esse código html e css e desejo fazer o seguinte com ele... 1º. Desejo colocar as formas nas seguintes posição

  • Quadrado vermelho e azul à esquerda (um ao lado do outro);
  • Quadrado verde e laranja à direita (um ao lado do outro);
  • Quadrado rosa à esquerda abaixo de todos os quadrados.

2º. Desejo colocar as formas nas seguintes posição

  • Quadrado vermelho e azul à esquerda (um ao lado do outro);
  • Quadrado laranja e rosa à esquerda (um ao lado do outro);
  • Quadrado verde à esquerda ao lado dos 4 quadrados menores.

CÓDIGO EM HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Teste com floats</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="floats.css">
    </head>
    <body>
        <main>
            <div class="quadro-divs">
                <div class="um" class="margem"></div>
                <div class="dois" class="margem"></div>
                <div class="tres" class="margem"></div>
                <div class="quatro" class="margem"></div>
                <div class="cinco" class="margem"></div>
            </div>
        </main>
    </body>
</html>

CÓDIGO EM CSS

.quadro-divs{
    width: 600px;
    height: 500px;
    border: solid 20px #CACCC0;
    padding: 20px;
}

div{
    text-align: center;
     border-radius:10px;
     margin: 5px;
}

.um{
    background-color: red;
    color: #fff;
    width: 75px;
    height: 75px;
}

.dois{
    background-color: blue;
    color: #fff;    
    width: 75px;
    height: 75px;
}

.tres{
    background-color: green;
    color: #fff;    
    width: 150px;
    height: 150px;
}

.quatro{
    background-color: orange;
    color: #fff;    
    width: 75px;
    height: 75px;
}

.cinco{
    background-color: #ff00ff;
    color: #fff;    
    width: 75px;
    height: 75px;
}
4 respostas
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Gleison, o primeiro código ficaria mais ou menos assim:

.um,.dois{
    float: left;
}

.tres,.quatro{
    float: right;
}
.cinco{
    float: left;
    clear: right;
}

Obs. Vai facilitar se você renomear as classes de acordo com as cores que elas representam eu fiz isso e a segunda situação ficou assim:


.vermelho,.azul,.laranja,.rosa{
    float: left;
}

.verde{
    float: right;
}

Espero ter ajudado e bons estudos.

por Gleilson
| 161.3k xp | 56 posts

Não deu certo. Eu já tinha tentado assim...

O problema está somente na posição dos quadros verde e laranja.

Eles precisam ficar na seguinte posição:

  • Verde e laranja à direita...
  • O teu código deixa o laranja e o verde a direita, sendo que é esperado: verde e laranja à direita.
solução!
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Gleison, deixei passar esse requisito agora entendi a questão. Fiz o seguinte editei meu html pra ajudar como tinha dito anteriormente colocando o nome das cores.

<html><head>
        <title>Teste com floats</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>
            <div class="quadro-divs">
                <div class="vermelho"></div>
                <div class="azul"></div>
                <div class="laranja"></div>
                <div class="verde"></div>
        <div class="rosa"></div>
            </div>
        </main>


</body></html>

Além disso inverti a ordem de verde laranja para laranja verde no html

No .css ficou assim:

.vermelho,.azul{
    float: left;
}

.laranja, .verde{
  float: right;
}


.rosa{
    float: left;
    clear: right;
}

E ficou conforme especificado trabalhar com float é complicado tem que fazer essas "jogadas" ainda bem que existe flexbox hoje em dia.

Espero ter ajudado, bons estudos.

por Gleilson
| 161.3k xp | 56 posts

Essa era justamente a minha dúvida. Eu queria colocar os quadros nessa posição conforme os códigos abaixo, mas sem trocar a ordem das divs que eram assim:

 <div class="quadro-divs">
    <div class="vermelho"></div>
       <div class="azul"></div>
       <div class="laranja"></div>
       <div class="verde"></div>
       <div class="rosa"></div>
</div>

HTML

<html>
    <head>
        <title>Teste com floats</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <main>
            <div class="quadro-divs">
                <div class="vermelho"></div>
                <div class="azul"></div>
                <div class="verde"></div>
                <div class="laranja"></div>
                <div class="rosa"></div>
            </div>
        </main>
</body>
</html>

CSS

div{
    text-align: center;
     border-radius:10px;
     margin: 5px;
}
.quadro-divs{
    width: 600px;
    height: 500px;
    border: solid 20px #CACCC0;
    padding: 20px;
}

.vermelho{
    background-color: red;
    color: #fff;
    width: 75px;
    height: 75px;
    float: left;
}

.azul{
    background-color: blue;
    color: #fff;    
    width: 75px;
    height: 75px;
    float: left;
}

.laranja{
    background-color: green;
    color: #fff;    
    width: 150px;
    height: 150px;
    float: right;
}

.verde{
    background-color: orange;
    color: #fff;    
    width: 75px;
    height: 75px;
    float: right;
}

.rosa{
    background-color: #ff00ff;
    color: #fff;    
    width: 75px;
    height: 75px;
    float: left;
    clear: right;
}

Eu não conhecia o flexbox, muito bacana...