4

Estou desenvolvendo um site que, em uma determinada DIV, possui três elementos com largura e altura definidas. Estes três elementos são estilizados de acordo com as seguintes regras:

.blocks-h{
    width: 320px;
    height: 150px;
    background: #DEDEDE;
    margin: auto;
}

Acontece que, destes três elementos, um deve estar posicionado à esquerda, um ao centro e outro à direita. Para fazer isso eu defini um estilo responsável por alinhar à esquerda ou à direita quaisquer elementos da minha página:

.left{
    float: left;
}

.right{
    float: right;
}

Meu HTML está da seguinte forma:

<div class="blocks-h left"></div>
<div class="blocks-h"></div>
<div class="blocks-h right"></div>

Este é o resultado que estou obtendo com as regras descritas acima: Resultado

Como vocês podem ver, a div posicionada à direita está sendo "empurrada" para baixo. Isto está acontecendo porque o estilo dos blocos não possui nenhuma definição de flutuação. E não pode ter mesmo, porque não faz sentido, semanticamente falando, definir float para um elemento que não deve "flutuar". Para isto é que criei as classes .left e .right.

Se eu troco a ordem das divs no meu HTML, eu tenho o resultado esperado:

<div class="blocks-h left"></div>
<div class="blocks-h right"></div>
<div class="blocks-h"></div>

Mas, novamente, estarei escrevendo um código cuja semântica não faz sentido, já que o segundo elemento exibido na tela é o terceiro que está definido no HTML.

Enfim. Existe alguma forma de centralizar um elemento que está no meio de outros dois que "flutuam", mas que seja correta?

Eu não gostaria de definir margem para estes blocos porque isso vai dificultar a minha vida quando eu for criar as regras de responsividade do site. E este nem é todo o problema porque, logo abaixo destes blocos, eu terei uma outra div com QUATRO elementos que devem estar centralizados da mesma forma.

Vocês podem me ajudar? Obrigado!

1 Resposta 1

2

Amigo, a teoria aplicada em cima de caixas assim é a mesma aplicada em grids responsivos. Fiz um exemplo básico:

HTML:

<div class="mae" >
   <div class="f1" > </div>
   <div class="f1" > </div>
   <div class="f1" > </div>
</div>

CSS:

.mae {
   margin-left:-5px;
   width:200px; background:#000;
   float:left;
}

.f1 {
   float:left;
   width: calc(33.333% - 5px);
   height:50px;
   background:#e1e1e1;
   margin-left:5px;
}

.mae {
  margin-left: -5px;
  width: 200px;
  background: #000;
  float: left;
}

.f1 {
  float: left;
  width: calc(33.333% - 5px);
  height: 50px;
  background: #e1e1e1;
  margin-left: 5px;
}
<div class="mae">
  <div class="f1"></div>
  <div class="f1"></div>
  <div class="f1"></div>
</div>

A margem negativa na div mãe é para compensar o margin-left da primeira div f1, assim inclusive já resolver seu problema na questão da responsividade (pois pode definir uma largura fixa para a div mãe ou em porcentagem e alinhar ela com margin: 0 auto; por exemplo). A única coisa que você vai definir é a distancia que quer ter entre as divs.

Espero ter ajudado.

3
  • Então cara... o que eu não queria era ter que definir essa distância entre as divs. Mas parece que não há uma solução melhor para esse problema do que a que você colocou aqui. Obrigado! 8/10/2015 às 13:47
  • 1
    Cara, não testei, mas da pra tentar colocar a margem em porcentagem tambem! Assim fica tudo relativo mesmo, tanto o tamanho quanto a margem, vc só vai precisar colocar tanto na div mãe quanto na div F1 um height:auto, ou min-height:x, com padding... assim fica tudo relativo inclusive o conteudo
    – luisaddor
    8/10/2015 às 16:51
  • Sim. É isso o que eu vou fazer mesmo. O problema com o height:auto é que o elemento pai apresenta um comportamento meio idiota e acaba não apresentando a altura correta, mas nada que um clear não resolva =) Valeu velho!!! 8/10/2015 às 19:30

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 .