es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede mover hacia la derecha ni hacia la izquierda mientras esté en la flexión.

13 Jul, 2023 Programación

Tengo un problema, como puedes ver en la imagen de abajo, quiero que el “1” esté a la izquierda y el “2” esté a la derecha. ¿Qué está mal en mi código?

Image

<div classname="mt-5 mx-5 py-3 shadow bg-white">
  <div classname="d-flex justify-content-center">
    <div style="{{" float:="" "left",="" display:="" "flex"="" }}="">
      <div classname="p-2">1</div>
    </div>
    <div classname="p-2 me-4">Popular Products</div>
    <div classname="p-2">Low Price</div>
    <div classname="p-2 ms-4">High Price</div>
    <div style="{{" float:="" "right",="" display:="" "flex"="" }}="">
      <div classname="p-2">2</div>
    </div>
  </div>
</div>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para tener “1” a la izquierda y “2” a la derecha, debes eliminar los estilos “float: left” y “float: right” de los divs y en su lugar utilizar “justify-content-start” para el primer div y “justify-content-end” para el segundo div. Esto se puede lograr cambiando el código de la siguiente manera:

    <div classname="mt-5 mx-5 py-3 shadow bg-white">
  <div classname="d-flex justify-content-between align-items-center">
    <div classname="d-flex justify-content-start">
      <div classname="p-2">1</div>
    </div>
    <div classname="p-2">Productos Populares</div>
    <div classname="d-flex justify-content-between align-items-center">
      <div classname="p-2">Precio Bajo</div>
      <div classname="p-2">Precio Alto</div>
      <div classname="d-flex justify-content-end">
        <div classname="p-2">2</div>
      </div>
    </div>
  </div>
</div>

    En este código actualizado, el primer div con “1” está contenido dentro de un div que utiliza “justify-content-start” para alinearlo a la izquierda, y el segundo div con “2” está contenido dentro de un div que utiliza “justify-content-end” para alinearlo a la derecha. La clase “align-items-center” se utiliza para centrar el contenido verticalmente.

Comments are closed.