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

Organização de blocos.

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Posicionamento mais a fundo e atividade Clear necessário?

por Ricardo Voltan Franciotti
| 117.4k xp | 19 posts

No codigo:

<body>
    <main>
        <div class="divblocks">
            <div class="blocopadrao bloco1">
                <p>1</p>
            </div>
            <div class="blocopadrao bloco2">
                <p>2</p>
            </div>
            <div class="blocopadrao bloco3">
                <p>3</p>
            </div>
            <div class="blocopadrao bloco4">
                <p>4</p>
            </div>
            <div class="blocopadrao bloco5">
                <p>5</p>
            </div>
        </div>
    </main>
</body>

No codigo CSS: 

.divblocks {
    width: 1000px;
    height:250px;
    margin-left: 50px;
    margin-right: 50px;
    border: solid 1px;
    display:inline-block;
}

.blocopadrao {
    border: 1px solid black;
    text-align: center;
    line-height:200%;
    display:inline-block;
}

.bloco1 {
    width: 350px;
    height: 250px;
    border: solid 1px;
    background-color: red;
    float: left;

}
.bloco2 {
    width: 300px;
    height: 80px;
    background-color: yellow;
    margin-left: 10px;
    float: left;
    clear:right;
}
.bloco3 {
    width: 300px;
    height: 100px;
    background-color: blue;
    margin-left: 10px;
    float: left;

}
.bloco4 {
    width: 300px;
    height: 60px;
    background-color: blue;
    margin-left: 10px;
    float: left;


}
.bloco5 {
    width: 300px;
    height: 60px;
    background-color: blue;
    margin-left: 10px;
    float: left;

}
.bloco6 {
    width: 300px;
    height: 60px;
    background-color: blue;
    margin-left: 10px;
    float: left;

}


.bloco4 {
    background-color: darkgoldenrod;
    float: left;
}
.bloco5 {
    background-color: blueviolet;
    float: left;
}

.bloco6 {
    background-color: antiquewhite;
    float: left;
}

O bloco 3 aparece sempre a direita e se incluir clear:left no bloco3 ele ficará abaixo do bloco1.

  • Como fazer para que o bloco 3 apareça abaixo do bloco 2?
  • Como fazer para que o bloco5 apareça abaixo do bloco 4 no canto direito da div?
O resultado esperado é :
  • 1 no canto esquerdo.
  • 2 no centro e acima
  • 3 abaixo do 2
  • 4 e 5 no lado direito (5 abaixo do 4)

Poderia dar uma sugestão ? Já tentei várias combinações mas nenhuma deu certo....

Ricardo

2 respostas
solução!
por Rodrigo da Silva Ferreira Caneppele
| 5009.3k xp | 8763 posts
Instrutor Instrutor

Oi Ricardo,

Nesse seu caso que você tem vários elementos próximos e precisa controlar bem a posição de cada um, o ideal é não utilizar o float, pois será bem complicado, isso se for possível.

O ideal nesse caso é utilizar outra abordagem para alinhamento, como por exemplo utilizando o flexbox, ou com position absolute/relative. Dá uma pesquisada a respeito.

Também dá para controlar o posicionamento meio que manualmente. Algo como:

.divblocks {
    width: 1000px;
    height:310px;
    margin-left: 50px;
    margin-right: 50px;
    border: solid 1px;
}

.blocopadrao {
    border: 1px solid black;
    text-align: center;
    line-height:200%;
    display:inline-block;
}

.bloco-left {
    width: 350px;
    height: 250px;
   display:inline-block;
   vertical-align: top;
}

.bloco-right {
    width: 640px;
    height: 250px;
   display:inline-block;
}

.bloco1 {
    width: 350px;
    height: 250px;
    border: solid 1px;
    background-color: red;
}

.bloco2 {
    width: 300px;
    height: 80px;
    background-color: yellow;
    margin: 0 auto;
    display: block;
}

.bloco3 {
    width: 300px;
    height: 100px;
    background-color: blue;
    margin: 0 auto;
    display: block;
}

.bloco4 {
    width: 300px;
    height: 60px;
    background-color: blue;
    display: block;
    margin-left: 340px;
}

.bloco5 {
    width: 300px;
    height: 60px;
    background-color: blue;
    display: block;
    margin-left: 340px;
}

.bloco6 {
    width: 300px;
    height: 60px;
    background-color: blue;
    margin-left: 10px;
}

.bloco4 {
    background-color: darkgoldenrod;
}

.bloco5 {
    background-color: blueviolet;
}

.bloco6 {
    background-color: antiquewhite;
}
<div class="divblocks">
    <div class="bloco-left">
       <div class="blocopadrao bloco1">
            <p>1</p>
        </div> 
    </div>

    <div class="bloco-right">
        <div class="blocopadrao bloco2">
            <p>2</p>
        </div>

        <div class="blocopadrao bloco3">
            <p>3</p>
        </div>

        <div class="blocopadrao bloco4">
            <p>4</p>
        </div>

        <div class="blocopadrao bloco5">
            <p>5</p>
        </div>
    </div>
</div>
por Ricardo Voltan Franciotti
| 117.4k xp | 19 posts

Entendi ! Obrigado pela ajuda !