0

Tengo unos div de tal forma que cuando la ventana es grande, haya dos div flotantes opuestos y un div inline en el centro. Busco que al reducir la ventana, cuando el espacio entre los div flotantes sea menor que el tamaño del div central, este ultimo "resbale" hacia abajo, y los dos div flotantes se mantengan a la misma altura.

#left {
  float: left;
}

#right {
  float: right;
}

#left, #right {
  width: 70px;
}

#center {
  display: inline-block;
  width: 500px;
}

#cartel {
  text-align: center;
}
<div id="cartel">
  <div id="left">Antes</div>
  <div id="center">Lista</div>
  <div id="right">Despues</div>
</div>

Pero no lo consigo, y en lugar de eso lo que resbala hacia abajo es el div derecho.

Cabe aclarar que el código no se ubica en el top de la pagina, sino que es antecedido por otros elementos.

3
  • no entiendo, a que te refieres con -> este ultimo "resbale" hacia abajo?... ya que luego dices -> Pero no lo consigo, y en lugar de eso lo que resbala hacia abajo es el div derecho. Tu pregunta es confusa... Commented el 17 ene. 2023 a las 20:57
  • @Cris223511.dev me refiero al div central Commented el 17 ene. 2023 a las 20:59
  • entonces no sería el último, sino el div central. Commented el 17 ene. 2023 a las 21:00

1 respuesta 1

0

Si ocupas flex puedes usar order para cambiar el orden de los elementos. Además de ocupar algo de media query.

Por ejemplo:

#left, #right {
  width: 70px;
}

#center {
  width: 500px;
}

#cartel {
  display:flex;
}
@media only screen and (max-width: 500px) {
  #cartel{
    flex-direction: column;
  }
  #center {
    order:3;
  }

}
<div id="cartel">
  <div id="left">Antes</div>
  <div id="center">Lista</div>
  <div id="right">Despues</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.