1

Eu tenho o componente 1 em float:left e o componente 2 em float:rigth, , porém o problema ocorre quando em resolução menores o componente 2 fica a baixo do componente 1 voltado pro lado direito e o componente um 1 voltado pro lado esquerdo.

Meu objetivo é que em resoluções menores o componente 2 ficar alinhado com o outro ao lado esquerdo.

Esclarecendo melhor o componente fica abaixo do outro, em resoluções menores um voltado pro lado esquerdo o outro pro lado direito.

Também lembrando que não posso dar float:left pros 2, se não vai ficar 1 abaixo do outro em resolução maiores.

8
  • Isso acontece porque um componente sobrepõe o outro. Você não ligaria para essa sobreposição? Esses componentes possuem o quê? Textos? Imagens? Commented 30/11/2014 às 17:51
  • O componente 1 é registro o outro é login social Commented 30/11/2014 às 17:54
  • É que fica incompatível com o celular um pro lado esquerdo outro pro lado direito Commented 30/11/2014 às 17:57
  • 1
    Seria melhor que um botão ficasse abaixo do outro mesmo, só ajustando no CSS para eles assumirem a largura da tela. Como eu disse anteriormente, há a quebra de espaço para não haver sobreposição de elementos. Commented 30/11/2014 às 18:03
  • 1
    Você pode utilizar o @media para ajustar isso. Commented 30/11/2014 às 18:13

1 Resposta 1

1

Essa questão se deve ao fato de que a soma do tamanho dos dois elementos é grande demais para caber na largura da tela, e por isso há essa quebra de espaço. Já que seu problema está na exibição em uma tela de celular, eu sugiro que você use media queries para aperfeiçoar o seu sistema em relação a exibição na tela de celulares.

body {
  margin: 0;
}

.left {
  float: left;
  background-color: green;
}

.right {
  float: right;
  background-color: red;
}

@media only screen and (max-width: 480px) {
  .right,
  .left {
    display: block;
    float: none;
  }
}
<div>
  <div class="left">
    Left is the left choice :D
  </div>
  <div class="right">
    Right is the right choice :3
  </div>
</div>

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 .